insertrow()和insertcell()是安全可靠的动态增删表格行列方法，必须在tbody上调用，新增行后立即为每行添加单元格，加列需遍历所有tr元素，删行列要注意索引偏移和兼容性问题。
用 insertRow() 和 insertCell() 增加行最可靠
直接操作 innerHTML 拼接字符串容易破坏事件绑定、丢失表单状态，还可能触发重复解析。原生 DOM 方法才是安全选择。
关键点：必须在 <tbody> 上调用 <code>insertRow()，不能对 <table> 直接调用（否则行为不一致）；新增的 <code><tr> 会自动插入到末尾，如需指定位置，传入索引参数（比如 <code>tbody.insertRow(-1) 等价于末尾，tbody.insertRow(0) 插到开头）。
-
insertRow()返回新<tr> 元素，后续所有单元格操作都基于它<li>每行新增后，立刻用 <code>insertCell()添加单元格，顺序执行，避免遗漏 - 如果表格没有显式
<tbody>，浏览器会自动补上，但建议写明，否则脚本在某些旧环境可能找不到目标节点<h3>动态添加列需要遍历所有 <code><tr> 并调用 <code>insertCell()列不是独立 DOM 节点，它由每行的
<td> 或 <code><th> 构成。所以加一列 = 对当前所有 <code><tr>（含 <code><thead> 和 <code><tbody> 中的行）各调一次 <code>insertCell()。常见错误是只给
<tbody> 的行加单元格，漏掉表头——结果表头少一列，数据列多一列，视觉错位。<ul> <li>先获取全部 <code>tr元素：table.querySelectorAll('tr')，再逐个处理 - 注意
insertCell()的索引：若要插到最后一列，统一用-1；若插到第 2 列，所有行都要用相同索引（比如1），否则列对不齐 - 新单元格内容建议用
textContent设置文本，避免 XSS 风险；如需 HTML，用innerHTML但务必过滤输入
删除行列时小心 removeChild() 和索引偏移
删行用 row.remove() 最简洁；删列则必须对每行调用 deleteCell(index)，且索引不能硬编码——因为删完一列后，后面所有列索引都会减 1。
更稳妥的做法是：先确定要删的是第几列（比如用户点击了第 3 列的标题），然后对所有 tr 执行 deleteCell(2)（因为索引从 0 开始）。
- 删行后，后续行的索引自动前移，所以批量删多行时，要从后往前删（比如用
for (let i = rows.length - 1; i >= 0; i--)） - 删列时，不要依赖
cellIndex动态查索引——某些框架或手动插入的单元格可能没正确更新该属性，直接记初始列号更稳 - 删完记得检查空行：如果
<tbody> 里没 <code><tr> 了，有些样式或 JS 逻辑会出问题，可酌情插入空行占位<h3>IE11 及以下不支持 <code>insertRow(-1)这种负数索引老版本 IE 只认非负整数，
-1会被当成0，导致新行插到最前面。实际兼容写法是：先取rows.length，再传进去。示例：
tbody.insertRow(tbody.rows.length)—— 这句在所有主流浏览器包括 IE8+ 都能正确追加到末尾。- 同理，
insertCell(-1)在 IE 中也不安全，统一用row.cells.length计算插入位置 - 如果项目还需支持 IE，避免使用
querySelectorAll('tr')获取表头行——IE8 不支持该方法，改用getElementsByTagName('tr')更稳妥 - 现代项目若已放弃 IE，可用
row.before(newRow)或row.after(newRow)实现更灵活的插入位置控制
真正麻烦的不是增删本身，而是列操作涉及多个行同步更新，稍有疏漏就出现“列错位”这种难复现的 UI 问题——动手前先想清楚哪几组
tr必须一起动，比写十行代码更重要。 - 同理，
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
