javascript动态增删表格行需获取tbody、用createelement或innerhtml创建带删除按钮的tr并append，删除采用事件委托绑定到tbody监听del-btn点击后remove整行，建议同步维护数据数组以保障视图一致性。
用 JavaScript 操作 DOM 实现表格行的动态增删，核心是获取表格元素、创建/插入新行、绑定删除逻辑，同时注意数据同步和事件委托。下面分步骤说明关键操作。
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
获取表格并准备新增行结构
先通过 document.getElementById 或 querySelector 获取 <table> 或其 <code><tbody>，推荐操作 <code><tbody> 避免干扰表头：
<ul><li>若表格有 <code><tbody>，直接获取它：<code>const tbody = document.querySelector('#myTable tbody');
let tbody = table.querySelector('tbody') || document.createElement('tbody');，再追加到 tabledocument.createElement('tr') + appendChild，或更简洁地用 innerHTML 拼接（适合简单场景）动态添加一行
每次新增时生成带内容和删除按钮的 <tr>，并插入到 <code><tbody> 末尾：
<ul>
<li>创建行：<code>const row = document.createElement('tr');
row.innerHTML = '<td>张三</td>
<td>25</td>
<td><button class="del-btn">删除</button></td>';
tbody.appendChild(row);
安全删除指定行（推荐事件委托）
直接给每个删除按钮绑 click 容易因动态添加而失效，应使用事件委托绑定到父容器（如 <tbody>）：
<ul>
<li>在 <code>tbody 上监听：tbody.addEventListener('click', e => { if (e.target.classList.contains('del-btn')) { e.target.closest('tr').remove(); } });
e.target.closest('tr') 确保准确找到被点击按钮所在的整行，兼容嵌套结构parentNode.parentNode.remove() 这类脆弱写法，容易因 HTML 结构微调而出错附加建议：保持数据与视图一致
如果业务需要维护 JS 数据数组，增删行时同步更新数组会更可控：
- 新增时：
data.push({ name: '张三', age: 25 }); renderTable(data); - 删除时：根据行索引或唯一 ID 找到对应项，
data.splice(index, 1)，再重绘 - 不强制要求，但对排序、搜索、提交等后续操作更友好
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
