javascript通过dom操作实现表格动态增删行，核心是用insertrow()和deleterow()或remove()方法控制行，结合事件委托绑定添加/删除按钮，确保操作tbody内行且避免重复绑定。
JavaScript 中通过操作 DOM 实现表格动态增删行，核心是获取 <table> 元素，再用 <code>insertRow()、deleteRow() 或原生 DOM 方法（如 appendChild()、remove()）控制行的添加与删除。关键在于正确选取目标位置、构造合法行结构，并绑定事件到按钮或链接。
添加新行：用 insertRow() 最简洁
insertRow() 是表格对象的内置方法，自动创建 <tr> 并插入到指定索引位置（不填参数默认追加到末尾）。新增行后，再用 <code>insertCell() 添加单元格，填入内容或表单控件：
- 调用
table.insertRow(-1)在末尾插入新行（-1表示最后一行之后） - 对新行调用
row.insertCell(0)逐个创建单元格，支持传入索引定位 - 向单元格赋值：
cell.textContent = "文本"或cell.innerHTML = "<input type="text">" - 若需带删除按钮，可在最后一列插入一个
<button class="del-row">删除</button>，后续统一监听
删除指定行：用 deleteRow() 或 remove()
有两种常用方式：
-
table.deleteRow(index)：直接按行号删除，适合已知位置（如点击“删除”时通过tr.rowIndex获取） -
tr.remove()：更灵活，可直接操作行元素，无需查索引；推荐配合事件委托使用 - 注意：删除前建议确认，例如
if (!confirm("确定删除该行？")) return; - 若表格有表头（
<thead>），确保只对 <code><tbody> 内的行操作，避免误删标题 <h3>绑定事件：推荐事件委托，避免重复绑定</h3> <p>为防止每新增一行就重新绑定点击事件，应把监听器放在表格或 <code><tbody> 上，利用事件冒泡捕获子元素触发： <ul> <li>给添加按钮设 <code>class="add-row"，删除按钮设class="del-row" - 用
table.addEventListener("click", e => { ... })监听 - 判断
e.target.classList.contains("del-row")，再向上找最近的<tr>（<code>e.target.closest("tr")）并移除 - 同理，点击添加按钮时执行新增逻辑，无需为每个按钮单独绑定
完整小例子（无框架，纯 JS）
HTML 中有一个空表格和一个“添加”按钮：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
| 姓名 | 年龄 | 操作 |
|---|
JS 部分：
const table = document.getElementById("myTable");
const tbody = table.querySelector("tbody");
const addBtn = document.getElementById("addBtn");
addBtn.addEventListener("click", () => {
const row = tbody.insertRow();
row.insertCell(0).textContent = "张三";
row.insertCell(1).textContent = "25";
const cell3 = row.insertCell(2);
cell3.innerHTML = '<button class="del-row">删除</button>';
});
table.addEventListener("click", (e) => {
if (e.target.classList.contains("del-row")) {
if (confirm("确定删除？")) {
e.target.closest("tr").remove();
}
}
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
