本文介绍如何使用原生 javascript 实现表格的动态增行与删行，并确保删除后剩余行的序号（如第一列输入框中的数字）保持连续递增，避免手动重排逻辑。

本文介绍如何使用原生 javascript 实现表格的动态增行与删行，并确保删除后剩余行的序号（如第一列输入框中的数字）保持连续递增，避免手动重排逻辑。

在构建可编辑的动态表格时，常见的需求是：点击“add”按钮新增一行，且首列序号自动递增；点击对应行的“delete”按钮则移除该行，并自动更新其余行的序号以维持连续性。原始方案虽实现了删除，但未重置序号——这会导致序号断层（如删除第2行后，剩下1、3、4），影响数据一致性与用户体验。

以下是完整、健壮的实现方案：

MOKI

一款面向AI短片创作的视觉内容工具，可辅助生成故事分镜和视频素材，适合从创意构思快速推进到动态内容制作。

下载

✅ 核心改进点

• addRow()：仍基于最后一行值递增生成新序号；
• deleteRow()：不仅删除当前行，还调用 reindexRows() 重新填充所有剩余行的序号；
• 所有操作均通过 document.getElementById('dataTable') 安全获取表格，避免依赖 DOM 顺序异常。

✅ 完整代码示例

#	item1	item2	操作
			+ 添加 − 删除

<script> function addRow(tableID) { const table = document.getElementById(tableID); const rowCount = table.rows.length; const lastRow = table.rows[rowCount - 1]; const lastValue = parseInt(lastRow.cells[0].querySelector('input').value) || 0; const row = table.insertRow(rowCount); const templateRow = table.rows[0]; // 复制首行结构（含 input 和按钮） const colCount = templateRow.cells.length; for (let i = 0; i < colCount; i++) { const newCell = row.insertCell(i); newCell.innerHTML = templateRow.cells[i].innerHTML; } // 设置新行序号 row.cells[0].querySelector('input').value = lastValue + 1; } function deleteRow(button) { const row = button.closest('tr'); row.parentNode.removeChild(row); reindexRows('dataTable'); // 删除后立即重索引 } function reindexRows(tableID) { const table = document.getElementById(tableID); const rows = Array.from(table.querySelectorAll('tbody tr')); rows.forEach((row, index) => { const input = row.cells[0].querySelector('input'); if (input) { input.value = index + 1; // 从 1 开始连续编号 } }); } </script>

⚠️ 注意事项

• 避免 innerHTML 复制事件丢失问题：本例中按钮绑定的是内联 onclick，若改用 addEventListener，需在 addRow() 中显式绑定新按钮事件。
• readonly 保护序号列：首列 加 readonly 属性防止用户误改，确保序号仅由逻辑控制。
• 兼容性优化：使用 closest('tr') 替代 parentNode.parentNode，语义更清晰、层级变动时更鲁棒。
• 空表处理：若支持初始无行，addRow() 需增加 if (rowCount === 0) 分支，设初始值为 1。

✅ 总结

该方案不仅解决了“点击删除按钮即移除当前行”的基础需求，更关键的是通过 reindexRows() 在每次删除后统一重置全部有效行的序号，保障了数据序列的完整性与可预测性。配合语义化 HTML 结构与现代 DOM API（如 closest()、querySelector），代码更易维护、扩展性强，适用于表单采集、订单明细、配置项管理等典型业务场景。