js实现添加删除表格操作

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

效果:

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

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

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

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

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

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

css:

 

html:

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

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 = '';
            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;
        }

效果:

js实现添加删除表格操作_第1张图片

js实现添加删除表格操作_第2张图片 

js实现添加删除表格操作_第3张图片

js实现添加删除表格操作_第4张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 

你可能感兴趣的