直接调用 insertRow() 无效需先确保 tbody 存在，否则 table.tBodies[0] 为 null；应显式创建并追加 tbody，再调用其 insertRow()；避免 innerHTML 拼接导致状态丢失，推荐 cloneNode(true) 克隆模板行并重置 id/name；删除行时须同步更新 DOM 和数据数组，并用 data-index 对齐。
直接调用 insertRow() 却没效果？先确认 tbody 存在
很多新手写 table.insertRow() 后发现新行没出现在表格里，甚至控制台报错“Cannot read property 'insertRow' of null”——根本原因是目标元素没找到，或者表格结构不标准。HTML 规范要求 <tbody> 是语义必需的，但很多人手写表格时省略它，导致 table.tBodies[0] 为 null。
正确做法是：显式检查并补全 <tbody>：
const table = document.getElementById("myTable");
let tbody = table.querySelector("tbody");
if (!tbody) {
tbody = document.createElement("tbody");
table.appendChild(tbody);
}
const newRow = tbody.insertRow(); // ✅ 现在 safe
- 不要依赖
table.rows.length判断行数，它包含<thead>和<tfoot>行；用tbody.rows.length才准确 -
insertRow(-1)和insertRow()效果相同，都插到末尾；传0才插最前 - 如果表格已有
<thead>，别往<thead>里插数据行，否则语义错乱、样式异常
cloneNode(true) 比拼接字符串更可靠
用 innerHTML += "<tr><td>..." 动态加行，短期能跑，但很快会出问题：表单控件（<input type="date">、<select>）状态丢失、事件监听器消失、id 重复引发冲突。真正健壮的做法是克隆模板行。
前提是 HTML 中有一行带完整结构的“模板”（比如 <tr id="template-row">），然后：
立即学习“Java免费学习笔记（深入）”；
const template = document.getElementById("template-row");
const newRow = template.cloneNode(true);
newRow.id = `row-${Date.now()}`; // 避免 id 冲突
newRow.querySelectorAll("input, select, textarea").forEach(el => {
el.value = "";
el.name = el.name.replace(/\[\d+\]/, `[${newRow.id}]`); // 重置 name，适配后端接收
});
tbody.appendChild(newRow);
-
cloneNode(true)复制所有子节点、属性、内联事件（如onclick），但不复制通过addEventListener绑定的事件——这点必须手动补 - 克隆后务必重置
id和name，否则提交时后端收不到数组形式数据或覆盖旧值 - 若模板行含按钮（如“删除”），建议用事件委托绑定，避免每次克隆都重新绑
删除行时别只删 DOM，还要清理关联数据
点“删除”按钮只是移除了 <tr>，但如果页面背后维护着一个 JavaScript 数组（比如 rowsData = [{name: "张三", age: 25}, ...]），不同步更新就会造成数据和视图不一致。
推荐在每行加 data-index 属性，与数组索引对齐：
<tr data-index="2"><td>李四</td><td>30</td><td><button onclick="deleteRow(this)">删</button></td></tr>
删除函数里同时操作 DOM 和数据：
function deleteRow(btn) {
const row = btn.closest("tr");
const index = parseInt(row.dataset.index, 10);
rowsData.splice(index, 1); // 先删数据
row.remove(); // 再删 DOM
// 更新剩余行的 data-index（可选，取决于是否需要保持连续）
}
- 用
btn.closest("tr")比层层找父节点更稳，兼容嵌套结构 - 别用
deleteRow(this)写在 HTML 里——这种内联写法无法访问闭包变量，也难做单元测试 - 如果数据量大（>100 行），删完后建议重排
data-index，否则后续增行时索引可能错位
性能瓶颈不在添加动作本身，而在批量渲染
单次加 1 行，无论用 insertRow 还是 cloneNode，都没性能问题。但用户一次点 10 次“添加”，触发 10 次 DOM 插入，浏览器会反复重排重绘，卡顿明显。
解决办法不是换库，而是批量操作：
function addMultipleRows(count) {
const fragment = document.createDocumentFragment();
for (let i = 0; i < count; i++) {
const row = template.cloneNode(true);
row.id = `row-${Date.now()}-${i}`;
fragment.appendChild(row);
}
tbody.appendChild(fragment); // ✅ 一次插入，非 10 次
}
-
DocumentFragment是离线 DOM 容器，插入时不触发渲染，适合组装多节点 - 如果表格列数多、每行 input 多，克隆 + 清空 value 的循环本身也会慢，可考虑用
input.type === "hidden"跳过清空 - 真到上千行，就得上虚拟滚动了——但那是另一层问题，和“怎么加一行”无关
name 是否带数组下标、required 属性要不要随克隆保留、日期控件有没有初始化脚本……这些不处理，加十行就崩三行。 
