本文介绍如何通过原生 javascript 实现动态增删表格行，支持自动递增序号、统一管理输入字段 id，并兼容 rowspan 逻辑（如首列编号需跨多行），无需第三方库即可完成专业级表单交互。
本文介绍如何通过原生 javascript 实现动态增删表格行，支持自动递增序号、统一管理输入字段 id，并兼容 rowspan 逻辑（如首列编号需跨多行），无需第三方库即可完成专业级表单交互。
在构建模块化需求采集表单时，常需支持用户动态添加“模块名称 + 描述”条目，同时保持左侧编号列（如 <th rowspan="3">1</th>）语义清晰、视觉连贯。但直接操作 rowspan 会显著增加 DOM 维护复杂度。更合理的设计是：将编号逻辑从 rowspan 解耦，转为由 JavaScript 动态生成并控制——既保证语义正确性，又大幅提升可维护性与扩展性。
以下为完整实现方案：
✅ HTML 结构优化（精简且可扩展）
<table class="w-full border">
<caption class="text-start mx-2 text-lg font-semibold">
A. Specify Modules to be developed or modified:
</caption>
<tbody id="tableBody">
<!-- 表头行 -->
<tr>
<th class="border-black border w-12 text-center">No.</th>
<th class="border-black border">Module Name</th>
<th class="border-black border">Module Description</th>
<th class="border-black border w-20 text-center">Actions</th>
</tr>
</tbody>
</table>
<a href="javascript:void(0)" onclick="addNewRow()" class="inline-block mt-3 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">
+ Add More
</a>? 关键改进说明：
- 移除原始
rowspan依赖，改用独立「No.」列，避免因动态插入导致rowspan错位；- 显式定义表头（
<tr>），提升可访问性（ARIA 友好）与样式可控性； <li>「Actions」列预留删除入口，布局更直观。</li> <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}`; // 单元格 0：序号（静态显示，非 input） const cell0 = newRow.insertCell(0); cell0.className = "border-black border text-center"; cell0.textContent = rowIndex; // 单元格 1：模块名称输入框 const cell1 = newRow.insertCell(1); cell1.className = "border-black border"; cell1.innerHTML = ` <input type="text" id="moduleName_${rowIndex}" placeholder="Module Name" class="placeholder:italic font-normal text-xs w-full p-1" required /> `; // 单元格 2：模块描述输入框 const cell2 = newRow.insertCell(2); cell2.className = "border-black border"; cell2.innerHTML = ` <input type="text" id="moduleDescription_${rowIndex}" placeholder="Module Description" class="placeholder:italic font-normal text-xs w-full p-1" required /> `; // 单元格 3：操作按钮（含删除） const cell3 = newRow.insertCell(3); cell3.className = "border-black border text-center"; cell3.innerHTML = rowIndex === 1 ? "" : `<button type="button" onclick="removeRow(${rowIndex})" class="text-red-600 hover:text-red-800 text-sm">Remove</button>`; rowIndex++; } // 删除指定行 function removeRow(index) { const row = document.getElementById(`row_${index}`); if (row) { row.remove(); // 可选：重排剩余行序号（若需严格连续编号） refreshRowNumbers(); } } // 【增强】重排所有序号（确保 No. 列始终 1,2,3... 连续） function refreshRowNumbers() { const rows = document.querySelectorAll("#tableBody tr[id^='row_']"); rows.forEach((row, i) => { const numCell = row.cells[0]; if (numCell) numCell.textContent = i + 1; }); } // 页面加载后自动初始化首行 document.addEventListener('DOMContentLoaded', () => { addNewRow(); });</pre><h3>⚠️ 注意事项与最佳实践</h3> <ul> <li> <strong>ID 唯一性</strong>：每个输入框均绑定唯一 <code>id="moduleName_1"等，便于后续表单序列化（如FormData或querySelector提取值）；- 无障碍支持：为
<input>添加required属性，并确保<th> 正确标记表头，提升屏幕阅读器兼容性；<li> <strong>删除安全性</strong>：<code>removeRow()先校验元素存在性，避免控制台报错；首行默认不可删（逻辑防误触）；- 样式隔离：所有单元格显式设置
className，避免因 CSS 继承导致边框/对齐异常；- 扩展提示：如需支持「拖拽排序」「批量导入」或「保存到 localStorage」，可在当前结构上轻松叠加功能。
该方案完全基于原生 Web API，零依赖、轻量、可复用，适用于各类动态表单场景——无论是需求文档、问卷系统还是后台配置页，都能以最小成本实现专业级交互体验。
立即学习“Java免费学习笔记（深入）”；
