本文介绍如何通过原生 Ja vaScript 实现动态增删表格行，支持自动递增序号、统一管理输入字段 ID，并兼容 rowspan 逻辑（如首列编号需跨多行），无需第三方库即可完成专业级表单交互。

本文介绍如何通过原生 Ja vaScript 实现动态增删表格行，支持自动递增序号、统一管理输入字段 ID，并兼容 rowspan 逻辑（如首列编号需跨多行），无需第三方库即可完成专业级表单交互。

适用场景与核心思路

在搭建模块化需求采集表单时，经常会遇到这样的场景：用户需要动态新增“模块名称 + 描述”这类条目，同时左侧编号列还要保持清晰、整齐，语义上也不能混乱。

比如 1 这种写法，在静态表格中没有问题。但一旦需要动态增删行，直接操作 rowspan 往往会让 DOM 维护变得很麻烦。

更稳妥的做法，是把编号逻辑从 rowspan 里拆出来，改由 Ja vaScript 动态生成和控制。这样既能保证语义正确，也能降低后续维护成本和扩展难度。

以下为完整实现方案：

HTML 结构优化

精简且可扩展

A. Specify Modules to be developed or modified:




No.
Module Name
Module Description
Actions




+ Add More

关键改进说明

• 移除原始 rowspan 依赖，改用独立「No.」列，避免因动态插入导致 rowspan 错位；
• 显式定义表头（），提升可访问性（ARIA 友好）与样式可控性；
• 「Actions」列预留删除入口，布局更直观。

Ja vaScript 核心逻辑

无依赖、高内聚

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 = `

`;

// 单元格 2：模块描述输入框
const cell2 = newRow.insertCell(2);
cell2.className = "border-black border";
cell2.innerHTML = `

`;

// 单元格 3：操作按钮（含删除）
const cell3 = newRow.insertCell(3);
cell3.className = "border-black border text-center";
cell3.innerHTML = rowIndex === 1 
 "" 
: `Remove`;

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();
});

实现亮点

• 自动递增序号：新增行时自动生成编号，减少手动维护成本；
• ID 统一管理：输入框使用规则化命名，便于后续读取和提交；
• 删除后可重排：通过 refreshRowNumbers() 保持编号连续；
• 零依赖：完全基于原生 Web API，无需第三方库；
• 适合扩展：后续接入更多交互功能时，结构依然清晰。

注意事项与最佳实践

• ID 唯一性：每个输入框均绑定唯一 id="moduleName_1" 等，便于后续表单序列化（如 FormData 或 querySelector 提取值）；
• 无障碍支持：为 添加 required 属性，并确保 正确标记表头，提升屏幕阅读器兼容性；
• 删除安全性：removeRow() 先校验元素存在性，避免控制台报错；首行默认不可删（逻辑防误触）；
• 样式隔离：所有单元格显式设置 className，避免因 CSS 继承导致边框/对齐异常；
• 扩展提示：如需支持「拖拽排序」「批量导入」或「保存到 localStorage」，可在当前结构上轻松叠加功能。

总结

该方案完全基于原生 Web API，零依赖、轻量、可复用，适用于各类动态表单场景。

• 需求文档
• 问卷系统
• 后台配置页

无论应用在哪类场景中，都能以最小成本实现专业级交互体验。

《夸克》非常好用的免费AI浏览器

下载APP查看