js实现添加删除表格

效果:

1、点击添加按钮往table中添加一行将全选前面的复选框变成false

1.1 、当前新增的复选框加上点击事件

2、点击删除按钮获取表格体中被选中的行, 删除整个tr, 将全选前面的复选框变成false

获取的是第一个td中的checkbox的状态 checked为true 2层父子

3 、点击全选按钮前面的复选框如果被选中下面的每一个复选框都被选中如果不被选中下面的每一个复选框都不被选中

4、点击每一个表格体中的复选框, 如果所有的复选框都被选中, 全选按钮就是被选中, 如果有一个没有被选中, 全选按钮就是不选中状态

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:

  <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:

 // 事件三部曲// 1. 获取元素 按钮 table  tBody  复选框  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 = '<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. 将全选前面的复选框变成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;}

效果:

js实现添加删除表格相关推荐

js 动态添加 tabel 表格
js 动态添加 tabel 表格代码 <!DOCTYPE html> <html><head><title> new document </t ...
js删除与php后台交互,js动态添加删除,后台取数据(示例代码)_javascript技巧
环境描述:就像你一般在论坛上发表文章,可能带附件,附件的数量是你手动添加删除的!! /********************************************************* ...
jquery添加删除表格行
jquery向表格添加一行,或者删除一行数据表格最后一行有一个添加按纽,具体如下当点击添加按纽的时候,在这个表格的倒数第二行添加一行,因为倒数第一行是添加按钮的位置.代码如下页面的table代码 ...
JS小功能(操作Table--动态添加删除表格及数据)实现代码
效果: [在新窗口打开图片] 代码: 代码如下: <head runat="server"> <title></title> < ...
用js实现动态添加删除表格数据
代码如下: <!DOCTYPE HTML> <html> <head> <meta charset = "UTF-8"> <t ...
html保存table并刷新,js操作添加删除table行，并进行刷新
添加行的js如下 table 的id为myTable 添加table的一行内容 function insertRow() { var rowValue = document.getElementBy ...
asp.net添加删除表格_你问我答|135编辑器使用之超链接和表格问题
嘿,胖友们大家好呀,我是三儿. 万众期待的『你问我答』栏目又回来了!之前我们有出过两期内容,解决了胖友们在日常工作中使用135编辑器常见到的一些问题. >>>>>点我查看 ...
asp.net添加删除表格_如何用openpyxl自动化编写Excel电子表格
有很多不同的东西你可以写到电子表格,从简单的文本或数字值到复杂的公式,图表,甚至图像. 创建一个简单的电子表格之前,大家看到了一个非常快速的例子,就是如何将 "Hello world!&q ...
使用Bootstrap + Vue.js实现添加删除数据
界面首先需要引入bootstrap的css和vue.js,jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版本的 Bootstrap 核心 C ...
js动态添加,删除option及add的使用方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

js实现添加删除表格

js实现添加删除表格相关推荐

最新文章

热门文章