本文通过 JavaScript 原生 DOM 操作，演示如何实现表格行的动态添加与删除，并详细解析了全选复选框与行内复选框之间的双向联动逻辑。代码包含完整的 HTML 结构、CSS 样式及 JS 事件处理，适用于需要管理列表数据的前端场景。
JavaScript 实现表格动态添加、删除与全选功能
本文提供了一套使用 JavaScript 实现表格动态管理的完整代码示例，供开发者参考。
功能效果如下：
1. 点击“添加”按钮时，将用户输入的数据作为新行插入到表格中，同时将全选复选框的状态重置为未选中（false）。
1.1 新增行中的复选框需绑定相应的点击事件，以响应后续的选择操作。
2. 点击“删除”按钮时，获取表格主体中被选中的行，移除对应的 <tr> 元素，并将全选复选框的状态重置为未选中（false）。
获取第一个td中checkbox的checked状态，若为true则处理两层父子关系
3. 点击表头的全选复选框：若该复选框被选中，则表格主体内所有行的复选框均变为选中状态；若未选中，则所有行复选框均变为未选中状态。
4. 监听表格主体内每个复选框的点击事件：当所有行的复选框均被选中时，表头的全选复选框自动变为选中状态；只要有一行未选中，全选复选框即变为未选中状态。
CSS 样式实现
CSS 样式部分：
<style>
.head {
width: 500px;
padding: 8px;
margin: 20px auto;
box-sizing: border-box;
border: 1px solid #eee;
}
input {
margin-left: 3px;
outline: none;
}
button {
float: right;
}
table {
width: 500px;
border: 1px solid #000;
margin: 0 auto;
border-collapse: collapse;
}
tr,
td,
th {
border: 1px solid #000;
}
tr td:nth-child(1) {
text-align: center;
}
.foot {
width: 500px;
margin: 8px auto;
padding: 8px;
box-sizing: border-box;
}
.foot button {
float: right;
}
td:nth-child(2),
td:nth-child(3),
td:nth-child(4) {
width: 20%;
}
</style>HTML 结构构建
HTML 结构部分：
<div class="head">
<span>请输入姓名 :</span><input type="text"><br>
<span>请输入性别 :</span><input type="radio" name="sex" checked>男<input type="radio" name="sex">女<br>
<span>请输入年龄 :</span><input type="text"><button>添加到表格</button>
</div>
<table>
<thead>
<th><input type="checkbox"> 全选</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</thead>
<tbody>
<tr class="tr1">
<td><input type="checkbox"></td>
<td>张三</td>
<td>女</td>
<td>88</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>女</td>
<td>12</td>
</tr>
</tbody>
</table>
<div class="foot"><button>删除所选行</button></div>JavaScript 核心逻辑
JavaScript 逻辑部分：
// 事件三部曲
// 1. 获取元素 按钮 table tBody 复选框 inp
var btns = document.querySelectorAll('button');
var table = document.querySelector('table');
var inps = document.querySelectorAll('input');
var all = table.tHead.querySelector('input');
var cks = table.tBodies[0].getElementsByTagName('input');
var cks1 = table.tBodies[0].querySelectorAll('input');
// console.log(btns, table, inps, cks);
// console.log(cks, all);
console.log(cks, cks1);
// 2. 点击添加按钮
btns[0].onclick = function(){
// 3. 往table中添加一行
var tr = document.createElement('tr');
// 4. tr加到tbody
table.tBodies[0].appendChild(tr);
// 5. 创建td
var inp = document.createElement('td');
inp.innerHTML = '<input type="checkbox">';
tr.appendChild(inp);
var user = document.createElement('td');
user.innerHTML = inps[0].value;
tr.appendChild(user);
var sex = document.createElement('td');
sex.innerHTML = inps[1].checked ? '男' : '女';
tr.appendChild(sex);
var age = document.createElement('td');
age.innerHTML = inps[3].value;
tr.appendChild(age);
// 6. 全选前面的复选框变成false
all.checked = false;
// 当前新增的复选框加上点击事件
var bck = tr.querySelector('input');
console.log(bck);
bck.onclick = function(){
auto();
}
}
// 7. 点击删除按钮 删除所选中的行
btns[1].onclick = function(){
// 8. 获取表格体中被选中的行
// console.log(cks, cks1);
// 9. 判断复选框是否被选中
for(var i = 0; i < cks.length; i++){
console.log(cks);
if(cks[i].checked){
// console.log(cks[i].parentNode.parentNode);
// console.log(cks);
// 10. 删除整行
cks[i].parentNode.parentNode.remove();
i--;
}
}
// 11. 将全选前面的复选框变成false
all.checked = false;
}
// 点击全选按钮前面的复选框 如果被选中 下面的每一个复选框都被选中 如果不被选中 下面的每一个复选框都不被选中
// 12. 点击all
all.onclick = function(){
console.log(all.checked);
// 13. 每一个
for(var i = 0; i < cks.length;i++){
cks[i].checked = all.checked;
}
}
// 点击每一个表格体中的复选框, 如果所有的复选框都被选中, 全选按钮就是被选中, 如果有一个没有被选中, 全选按钮就是不选中状态
for(var j = 0; j < cks.length; j++){
// 点击
cks[j].onclick = function(){
// 所有的
// for(var i = 0; i < cks.length; i++){
// console.log(cks[i].checked);
// // 如果有一个没有被选中, 全选按钮就是不选中状态
// if(cks[i].checked == false){
// // 全选按钮就是不选中
// all.checked = false;
// // 结束整个函数
// return;
// }
// }
// // 所有的都被选中
// all.checked = true;
auto();
}
}
function auto() {
// 所有的
for(var i = 0; i < cks.length; i++){
console.log(cks[i].checked);
// 如果有一个没有被选中, 全选按钮就是不选中状态
if(cks[i].checked == false){
// 全选按钮就是不选中
all.checked = false;
// 结束整个函数
return;
}
}
// 所有的都被选中
all.checked = true;
}运行效果展示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。