table.insertRow()和deleteRow()是原生JS操作表格行的核心方法：insertRow(index)在指定位置插入tr（不传参则追加），需手动添加单元格；deleteRow(index)删除指定索引行，批量删除须倒序以避免索引错乱。

table.insertRow() 和 table.deleteRow() 是原生 JavaScript 操作 HTML 表格行的核心方法，适合轻量级动态增删行，无需依赖框架。关键在于正确获取表格引用、理解索引逻辑、避免 DOM 操作陷阱。

插入新行：insertRow() 的用法与注意事项

调用 insertRow(index) 会在指定位置插入一行（），不传参数则默认追加到末尾。返回新创建的 tr 元素，可立即为其添加单元格：

• 索引从 0 开始，table.insertRow(0) 插入第一行（表头下方）；table.insertRow(-1) 等价于末尾追加（规范支持，但建议用 table.insertRow() 更清晰）
• 插入后需手动创建 td 或 th 单元格并填入内容，例如：newRow.insertCell(0).textContent = "张三"
• 若表格含 或 ，应优先对 tbody 调用 insertRow()，避免误插到表头区域

  删除指定行：deleteRow() 的安全操作方式

  deleteRow(index) 直接移除指定索引处的 。常见易错点：

  • 索引越界会抛错，删除前建议检查 table.rows.length > index
  • 删除后，后续行索引自动前移——例如删第 2 行（index=1），原第 3 行变成新第 2 行（index=1）
  • 批量删除多行时，务必从高索引向低索引删（如 [3,1,0] → 改为 [3,2,1] 或倒序遍历），否则索引错乱导致漏删或报错

  结合事件实现增删按钮的典型结构

  为每行添加「删除」按钮时，推荐在按钮点击事件中通过 event.target.closest("tr") 获取所在行，再调用 row.parentNode.deleteRow(row.rowIndex)：

  • 避免硬编码索引，适应动态变化的行顺序
  • 新增行时，可将数据对象映射为 tr，并设置 data-id 属性便于后续定位和状态管理
  • 删除前可加简单确认：if (!confirm("确定删除？")) return，提升交互安全性

  兼容性与现代替代思路

  这两个方法在所有主流浏览器中完全支持（包括 IE6+），但注意：

  • 它们只操作 的直接子 ，不适用于嵌套表格或自定义渲染场景
    大量频繁操作时，DOM 重排开销明显，可考虑先用 documentFragment 批量构建再一次性插入
    复杂业务建议迁移到虚拟 DOM 方案（如 Vue/React），但纯静态表或管理后台小功能，原生方法简洁高效、无额外依赖