正确做法是先确保 tbody 存在再调用 insertrow()；用 clonenode(true) 克隆模板行并重置 input 值与 id；insertcell() 应循环生成避免硬编码索引；删除行时须同步数据源并更新序号列。

直接用 insertRow() 插入新行，但必须确保目标是 tbody

很多报错如 Cannot read properties of null (reading 'insertRow') 都是因为对 table 元素直接调用 insertRow()，而浏览器实际只允许在 tbody、thead 或 tfoot 上执行该方法。如果你的 HTML 没显式写 <tbody>，部分浏览器会自动补上，但不能依赖——最好主动检查或创建： <ul> <li>先用 <code>table.querySelector('tbody') 获取；

如果返回 null，就 document.createElement('tbody') 并 table.appendChild(tbody)；

再调用 tbody.insertRow(-1)（-1 表示末尾，省略参数也等效）。

克隆模板行比拼接字符串更安全，尤其含表单控件时

当你表格里有 <input>、<select></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)……一旦列数变动就得全改。更稳的方式是循环生成：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

• 假设你有一组数据 ['张三', '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: '张三'}, ...]），不手动同步就会出现“界面上删了，提交时还带着旧数据”。

• 给每行加 data-id 或 data-index 属性，和数据源下标对齐；
• 点击删除按钮时，先从数组里 splice() 对应项，再删 DOM；
• 序号列（如第1、2、3行）也要重绘——遍历剩余 tr，更新第一列的 textContent。

真实项目里最常卡住的不是语法，而是 tbody 是否存在、克隆后没清 input 值、删除时没同步数据源——这三处漏掉任意一个，用户操作两三次就会出错。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南