直接 innerHTML += 会丢失事件和状态，因为每次拼接都触发浏览器重新解析 HTML，销毁并重建节点，导致事件监听器、表单当前值及自定义属性全部清空；正确做法是用 template.content.cloneNode(true) 克隆干净副本再插入。
为什么直接 innerHTML += `... ` 会丢失事件和状态
因为每次用 innerHTML 拼接都会触发浏览器重新解析整段 HTML，原有 <tr> 节点被销毁重建，绑定的事件监听器、表单控件的当前值（比如 <code><input> 的 value 或 checked 状态）、甚至自定义属性都会清空。这不是“追加”，而是“重绘”。
正确做法是把模板内容提取为可复用的节点片段，每次克隆一个干净副本：
- 用
<template>包裹一行结构，它不会被渲染，也不会被 JS 执行，纯静态模板 - 在 JS 中用
content.cloneNode(true)获取深拷贝，再插入到<tbody>中 - 克隆后的节点是全新实例，可安全绑定事件、设置初始值
template 标签里写什么才不会被浏览器忽略或报错
<template> 只允许直接子节点是合法的表格内容模型：即 <tr>、<colgroup>、<caption> 等。不能把 <tr> 套在 <div> 里，也不能漏掉 <tbody> 层级（虽然浏览器会容错修复，但模板中显式写出更可靠）。
推荐结构：
立即学习“前端免费学习笔记（深入）”；
<template id="row-template">
<tr>
<td><input type="text" name="name" /></td>
<td><select name="category"><option value="a">A</option></select></td>
<td><button type="button" class="remove-row">×</button></td>
</tr>
</template>
注意：name 属性保留用于表单提交；class 和 data- 属性可用于后续 JS 查找和操作；避免在模板内写 onclick 行内事件 —— 统一用事件委托更稳妥。
如何给克隆行的 input 设置唯一 name 或 ID
表单提交时若所有 name 相同，后端只能收到最后一个值。必须让每行字段名可区分，常见策略是加序号或时间戳：
- 用
document.querySelectorAll('tbody tr').length获取当前行数，作为新行索引 - 克隆后遍历该行内所有
input、select、textarea，用el.name = el.name + '[' + index + ']'重写（如name="price"→name="price[2]"） - 如果需 DOM 查询（比如校验），可设
id="price-2"，但非必需；name才决定提交键名 - 不要用
Date.now()或随机数——会导致后端无法按顺序解析数组
示例代码片段：
const tmpl = document.getElementById('row-template');
const row = tmpl.content.cloneNode(true);
const index = document.querySelectorAll('tbody tr').length;
row.querySelector('input[name="name"]').name = `name[${index}]`;
row.querySelector('select[name="category"]').name = `category[${index}]`;
删除行时为什么用事件委托而不是逐个绑定 remove 按钮
因为克隆行是动态添加的，按钮节点在初始化时并不存在，逐个 addEventListener 会漏掉后续新增的按钮。事件委托把监听器挂在父容器（如 <tbody>），靠 event.target 判断是否点击了 .remove-row：
document.querySelector('tbody').addEventListener('click', e => {
if (e.target.classList.contains('remove-row')) {
e.target.closest('tr').remove();
}
});
注意两点：
- 用
e.target.closest('tr')向上找最近的行，避免误删（比如按钮里有<i>图标） - 删除后不需要手动更新其他行的
name索引——后端应按实际提交的键名（如name[0]、name[2]）处理，允许稀疏索引
真正容易被忽略的是：克隆前没清空模板内 input 的 value，导致每次新增行都带着上一次的值。克隆后务必调用 row.querySelectorAll('input, select, textarea').forEach(el => el.value = '')。
