正确做法是先确保 tbody 存在再调用 insertRow()；用 cloneNode(true) 克隆模板行并重置 input 值与 ID；insertCell() 应循环生成避免硬编码索引；删除行时须同步数据源并更新序号列。
直接用 insertRow() 插入新行，但必须确保目标是 tbody
很多报错如 Cannot read properties of null (reading 'insertRow') 都是因为对 table 元素直接调用 insertRow()，而浏览器实际只允许在 tbody、thead 或 tfoot 上执行该方法。如果你的 HTML 没显式写 <tbody>，部分浏览器会自动补上，但不能依赖——最好主动检查或创建：
- 先用
table.querySelector('tbody')获取； - 如果返回
null，就document.createElement('tbody')并table.appendChild(tbody)； - 再调用
tbody.insertRow(-1)（-1表示末尾，省略参数也等效）。
克隆模板行比拼接字符串更安全，尤其含表单控件时
当你表格里有 <input>、<select> 或日期控件，用 innerHTML += '<tr>...</tr>' 会导致事件丢失、状态残留、重复 ID，甚至触发 Cannot read properties of null (reading 'innerHTML') ——因为你可能在循环中访问了不存在的 document.getElementById("edCol"+i)。
- 把首行设为模板，ID 如
edCol0，并确保它存在； - 用
templateRow.cloneNode(true)深克隆整行（含子节点和内联事件）； - 重置所有
input的value，并更新其id和name（例如input.id = 'name-' + rowCount）； - 最后用
tbody.appendChild(newRow)插入，别用table.appendChild()。
insertCell() 填单元格时，别硬编码索引
常见错误是写 row.insertCell(0)、row.insertCell(1)……一旦列数变动就得全改。更稳的方式是循环生成：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 假设你有一组数据
['张三', '25', '删除']，就用rowData.forEach((text, i) => { row.insertCell(i).textContent = text; })； - 如果某列要放按钮，用
cell.innerHTML = '<button onclick="deleteRow(this)">删除</button>'； - 注意：不要在
onclick里写闭包变量（如i），容易全删最后一行——改用this.closest('tr').remove()更可靠。
删除行时，别只删 DOM，漏掉数据源同步
单纯调用 row.remove() 或 tbody.deleteRow(index) 只影响视图。如果背后有数组存着行数据（比如 rowsData = [{name: '张三'}, ...]），不手动同步就会出现“界面上删了，提交时还带着旧数据”。
立即学习“Java免费学习笔记（深入）”；
- 给每行加
data-id或data-index属性，和数据源下标对齐； - 点击删除按钮时，先从数组里
splice()对应项，再删 DOM； - 序号列（如第1、2、3行）也要重绘——遍历剩余
tr，更新第一列的textContent。
tbody 是否存在、克隆后没清 input 值、删除时没同步数据源——这三处漏掉任意一个，用户操作两三次就会出错。 
