insertRow()和insertCell()是安全可靠的动态增删表格行列方法，必须在tbody上调用，新增行后立即为每行添加单元格，加列需遍历所有tr元素，删行列要注意索引偏移和兼容性问题。
用 insertRow() 和 insertCell() 增加行最可靠
直接操作 innerHTML 拼接字符串容易破坏事件绑定、丢失表单状态，还可能触发重复解析。原生 DOM 方法才是安全选择。
关键点：必须在 <tbody> 上调用 insertRow()，不能对 <table> 直接调用（否则行为不一致）；新增的 <tr> 会自动插入到末尾，如需指定位置，传入索引参数（比如 tbody.insertRow(-1) 等价于末尾，tbody.insertRow(0) 插到开头）。
-
insertRow()返回新<tr>元素，后续所有单元格操作都基于它 - 每行新增后，立刻用
insertCell()添加单元格，顺序执行，避免遗漏 - 如果表格没有显式
<tbody>，浏览器会自动补上，但建议写明，否则脚本在某些旧环境可能找不到目标节点
动态添加列需要遍历所有 <tr> 并调用 insertCell()
列不是独立 DOM 节点，它由每行的 <td> 或 <th> 构成。所以加一列 = 对当前所有 <tr>（含 <thead> 和 <tbody> 中的行）各调一次 insertCell()。
常见错误是只给 <tbody> 的行加单元格，漏掉表头——结果表头少一列，数据列多一列，视觉错位。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 先获取全部
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>里没<tr>了，有些样式或 JS 逻辑会出问题，可酌情插入空行占位
IE11 及以下不支持 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 必须一起动，比写十行代码更重要。
