如何用js实现添加删除表格

本篇内容主要讲解"如何用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[xss_clean] = '';            tr.appendChild(inp);             var user = document.createElement('td');            user[xss_clean] = inps[0].value;            tr.appendChild(user);             var sex = document.createElement('td');            sex[xss_clean] = inps[1].checked ? '男' : '女';            tr.appendChild(sex);             var age = document.createElement('td');            age[xss_clean] = 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][xss_clean][xss_clean]);                    // console.log(cks);                    // 10. 删除整行                    cks[i][xss_clean][xss_clean].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实现添加删除表格"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！