本文介绍如何通过原生 JavaScript 实现带序号列、可动态增删的模块信息表格，无需第三方库，支持 rowspan 逻辑模拟、唯一 ID 生成及安全 DOM 操作。
本文介绍如何通过原生 javascript 实现带序号列、可动态增删的模块信息表格，无需第三方库，支持 `rowspan` 逻辑模拟、唯一 id 生成及安全 dom 操作。
在实际表单开发中，常需构建类似“模块清单”的表格：左侧为递增序号（视觉上跨多行），右侧为成对的输入项（如模块名 + 描述）。由于 HTML 中 <th rowspan="3"> 无法随动态行数自动适配，<strong>我们采用“逻辑序号 + 视觉分离”策略</strong>——即不再依赖 <code>rowspan 渲染序号，而是将序号作为独立列内容动态生成，确保新增/删除行时结构稳定、语义清晰。
✅ 推荐重构后的 HTML 结构
首先简化并标准化表格结构，为 JavaScript 操作提供明确锚点：
<table class="w-full border">
<caption class="text-start mx-2 text-lg font-semibold">
A. Specify Modules to be developed or modified:
</caption>
<thead>
<tr>
<th class="border-black border w-12">#</th>
<th class="border-black border">Module Name</th>
<th class="border-black border">Module Description</th>
<th class="border-black border w-20">Actions</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- 动态行将插入此处 -->
</tbody>
</table>
<a href="javascript:void(0)" onclick="addNewRow()" class="mt-2 inline-block px-4 py-1 bg-blue-600 text-white rounded hover:bg-blue-700">Add More</a>? 关键改进：移除不可维护的
rowspan，用标准<thead> 定义表头，<code><tbody id="tableBody"> 作为操作容器，提升可读性与可访问性。<h3>? 核心 JavaScript 实现</h3><pre class="brush:php;toolbar:false;">let rowIndex = 1; // 添加新行 function addNewRow() { const tableBody = document.getElementById('tableBody'); const newRow = tableBody.insertRow(); newRow.id = `row_${rowIndex}`; // 序号单元格（静态显示当前序号） const cell0 = newRow.insertCell(0); cell0.textContent = rowIndex; cell0.className = 'border-black border text-center'; // 模块名称输入框 const cell1 = newRow.insertCell(1); cell1.innerHTML = ` <input type="text" id="moduleName_${rowIndex}" placeholder="Module Name" class="placeholder:italic font-normal text-xs w-full p-1 border border-gray-300 rounded" /> `; // 模块描述输入框 const cell2 = newRow.insertCell(2); cell2.innerHTML = ` <input type="text" id="moduleDescription_${rowIndex}" placeholder="Module Description" class="placeholder:italic font-normal text-xs w-full p-1 border border-gray-300 rounded" /> `; // 操作列：仅当行数 > 1 时显示删除按钮（首行不可删，避免空表） const cell3 = newRow.insertCell(3); cell3.className = 'border-black border text-center'; if (rowIndex > 1) { cell3.innerHTML = ` <button type="button" onclick="removeRow(${rowIndex})" class="text-red-600 hover:text-red-800 text-sm font-medium" > Remove </button> `; } else { cell3.innerHTML = '&mdash;'; } rowIndex++; } // 删除指定行 function removeRow(index) { const row = document.getElementById(`row_${index}`); if (row) { row.remove(); // 可选：重排剩余序号（若需严格连续显示） updateRowNumbers(); } } // 【可选】重排序号（保证 # 列始终 1,2,3... 连续） function updateRowNumbers() { const rows = document.querySelectorAll('#tableBody tr'); rows.forEach((row, i) => { const numCell = row.cells[0]; if (numCell) numCell.textContent = i + 1; }); }</pre><h3>⚠️ 注意事项与最佳实践</h3> <ul> <li> <strong>避免 <code>href="javascript:void(0)"+onclick内联事件：推荐改用addEventListener绑定，提升可维护性与安全性（示例中保留为兼容性演示，生产环境建议解耦）；ID 唯一性保障： rowIndex全局递增，确保row_X和moduleName_X等 ID 不重复，便于后续表单序列化；无障碍友好：为 <button></button>添加type="button"防止意外提交；<th> 表头已明确作用域，屏幕阅读器可正确解析；<li> <strong>样式隔离</strong>：所有输入框添加 <code>border和rounded类，避免默认样式干扰布局；首行保护逻辑： rowIndex === 1时隐藏删除按钮，防止用户误删唯一数据行。✅ 总结
该方案完全基于原生 JavaScript，零依赖、轻量高效，兼顾语义化 HTML、可访问性与交互体验。它将“序号管理”从脆弱的
rowspan布局逻辑中解耦，转为可控的数据驱动渲染，同时支持灵活扩展（如添加校验、导出 JSON、绑定 Vue/React 状态等）。只需复制 HTML 结构与脚本，即可立即集成到任意现代前端项目中。立即学习“Java免费学习笔记（深入）”；
