最简单方式是直接调用table.insertRow()或table.insertRow(-1)，自动在<tbody>末尾插入新行；插入后必须用insertCell()逐个添加单元格并设置内容，避免innerHTML拼接导致重排和事件丢失。
用 insertRow() 在表格末尾加一行最简单
直接调用表格元素的 insertRow() 方法，它会自动在 <tbody> 末尾插入新行，不用手动创建 <tr> 元素。注意：如果表格没写 <tbody>，浏览器会隐式生成一个，但最好显式写出来，避免兼容性问题。
常见错误是把 insertRow() 调用在 <table> 上却没指定索引，结果插到表头（<thead>）后面、第一行数据前——这通常不是你想要的。
-
table.insertRow(-1)等价于追加到<tbody>末尾（推荐） -
table.insertRow()不传参，默认也是 -1，但显式写更清晰 - 如果想插到第 2 行位置（索引从 0 开始），用
table.insertRow(1)，但要确保目标位置在<tbody>内，不在<thead>或<tfoot>里
新增行后必须用 insertCell() 填充单元格
insertRow() 只创建空 <tr>，不带任何 <td>。漏掉这步，行会“看不见”——DOM 里存在，但渲染为空白。
每个单元格都要单独调用 insertCell()，顺序决定列序。不能靠 innerHTML 一次性塞整行 HTML，否则容易破坏结构或触发重排。
立即学习“Java免费学习笔记（深入）”；
- 用
row.insertCell(0)插入第 1 列，row.insertCell(1)插入第 2 列……索引超出当前列数时自动追加 -
cell.textContent = '内容'比cell.innerHTML = '内容'更安全，避免 XSS 和标签解析错误 - 如果某列需要
<input>，得用document.createElement('input')创建再 append，不能只设 textContent
动态加行时别直接操作 innerHTML 拼接字符串
有人习惯拼接 table.innerHTML += '<tr><td>xxx</td></tr>'，这会导致整个 <tbody> 重渲染，已有的 input 输入框会丢失焦点、事件监听器全部失效、滚动位置重置。
尤其当表格已有几十行、且含 checkbox 或自定义组件时，这种写法会让交互彻底断裂。
- 所有动态增删都该走 DOM 方法（
insertRow/insertCell/removeChild） - 若真要用字符串模板，先用
document.createElement('template')解析，再 cloneNode(true) 插入，但多数场景没必要绕这么远 - React/Vue 项目里不该手动操作 DOM，这是框架边界问题，不在本文讨论范围
给新行绑定事件要用事件委托，别每个 <button> 单独 addEventListener
每加一行就给里面的删除按钮绑一次 click，100 行就是 100 个监听器，内存泄漏风险高，而且后续新增行还得重复绑定。
表格本身是稳定容器，把事件监听挂到 <table> 或 <tbody> 上，用 event.target.matches('.del-btn') 判断点击源，才是可持续做法。
- 监听器只需绑定一次，在页面初始化时完成
- 新行里的按钮无需额外绑定，只要 class 或 data 属性匹配即可被委托捕获
- 注意
event.target可能是<i>图标而非按钮本身，用event.target.closest('.del-btn')更稳妥
