js实现添加删除表格操作 js实现添加删除表格操作

本文实例为大家分享了js实现添加删除表格的具体代码，供大家参考，具体内容如下

效果:
1、点击添加按钮往table中添加一行将全选前面的复选框变成false
1.1.当前新增的复选框加上点击事件
2、点击删除按钮获取表格体中被选中的行, 删除整个tr, 将全选前面的复选框变成false
获取的是第一个td中的checkbox的状态 checked为true 2层父子
3 、点击全选按钮前面的复选框如果被选中下面的每一个复选框都被选中如果不被选中下面的每一个复选框都不被选中
【js实现添加删除表格操作】4、点击每一个表格体中的复选框, 如果所有的复选框都被选中, 全选按钮就是被选中, 如果有一个没有被选中, 全选按钮就是不选中状态
css：

.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%; }

html:

请输入姓名 :
请输入性别 :男女
请输入年龄 :
全选姓名性别年龄
张三女 88
李四男 18
王五女 12

姓名	性别	年龄
张三	女	88
李四	男	18
王五	女	12

javascript:

// 事件三部曲 // 1. 获取元素按钮 tabletBody复选框inpvar 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加到tbodytable.tBodies[0].appendChild(tr); // 5. 创建tdvar inp = document.createElement('td'); inp.innerHTML = ''; 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. 将全选前面的复选框变成falseall.checked = false; }// 点击全选按钮前面的复选框如果被选中下面的每一个复选框都被选中如果不被选中下面的每一个复选框都不被选中 // 12. 点击allall.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; }

效果: