htmltableelement 提供 insertrow、deleterow、insertcell、deletecell 等原生方法高效操作表格行与单元格，无需专用 tableapi；配合 documentfragment 批量更新可优化性能，兼容 ie9+。
现代前端框架（如 React、Vue）和原生 DOM 操作都提供了更高效、语义化的方式管理表格数据，但“table 专用 API”并不是一个标准或广泛支持的独立 API。浏览器原生没有名为 TableAPI 或类似全局对象的接口。所谓“快速增删表格行与单元格数据”，实际依赖的是 HTMLTableElement 及其继承自 HTMLElement 的标准 DOM 方法。
用原生 table 元素方法动态操作行
HTMLTableElement 提供了几个专用于表格结构的方法，比通用 appendChild 更直观、更安全：
-
insertRow([index])：在指定位置插入新<tr>，返回该行元素。不传参数则追加到末尾。 <li> <strong><code>deleteRow(index)：删除指定索引（从 0 开始）的行；传-1删除最后一行。 -
rows：只读集合（HTMLCollection），可按索引访问现有行，例如table.rows[0]。
示例：在表格末尾添加一行，并填入两列文本
const table = document.getElementById('myTable');
const newRow = table.insertRow(); // 返回 <tr>
const cell1 = newRow.insertCell(0); // 第一列
const cell2 = newRow.insertCell(1); // 第二列
cell1.textContent = '张三';
cell2.textContent = '工程师';
<h3>用 insertCell 和 deleteCell 管理单元格</h3>
<p><code><tr> 元素也有专属方法，避免手动创建 <code><td> 并 append：
<ul><li>
<strong><code>insertCell([index])</code></strong>：在行内插入 <code><td>（默认为 <code><td>，不是 <code><th>），返回该单元格元素。
<li>
<strong><code>deleteCell(index)</code></strong>：删除指定索引的单元格（注意：索引是当前行内单元格顺序，不是整表列号）。</li>
<li>
<strong><code>cells</code></strong>：只读 <code>HTMLCollection</code>，可遍历或索引访问当前行所有单元格。</li>
<p>⚠️ 注意：<code>insertCell</code> 不会自动设置 <code>colspan</code> 或 <code>rowspan</code>，如需合并单元格，需手动设置属性。</p>
<h3>批量更新建议：先离线操作，再一次性挂载</h3>
<p>频繁调用 <code>insertRow</code>/<code>insertCell</code> 可能触发多次重排（reflow），影响性能。推荐做法：</p>
<ul>
<li>用 <code>document.createDocumentFragment()</code> 创建文档片段；</li>
<li>在片段中构建完整 <code><tr> 及其 <code><td>；
<li>最后用 <code>table.appendChild(fragment)</code> 一次插入。</li>
<p>若使用框架（如 React），应避免直接操作 DOM，改用状态驱动渲染（例如维护 <code>rowsData</code> 数组，map 渲染 <code><tr>）。
<h3>兼容性与注意事项</h3>
<p>上述方法（<code>insertRow</code>、<code>deleteRow</code>、<code>insertCell</code>、<code>deleteCell</code>）在所有现代浏览器及 IE9+ 中均稳定支持，无需 polyfill。</p>
<p>关键提醒：</p>
<ul>
<li>索引越界（如 <code>deleteRow(100)</code> 当只有 5 行时）会抛出 <code>IndexSizeError</code>，建议先校验 <code>table.rows.length</code>；</li>
<li>
<code>insertRow(-1)</code> 等价于追加，但 <code>insertCell(-1)</code> 不合法，必须是非负整数或省略；</li>
<li>表格内容更新后，若依赖 CSS 选择器或 <code>querySelector</code> 获取新节点，请确保操作时机在 DOM 更新之后（通常同步完成）。</li>
</ul>
</tr></code></p>
</td></code>
</tr></code>
</li>
</ul>
</th></code>
</td></code>
</td></code>
</li></ul>
</td></code>
</tr></code></p>
</tr>
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
