用js制作表格的新增，修改和删除等功能_js 表新增

作者：小舞很执着 | 2024-07-27 04:43:57

踩

js 表新增

最终效果如下

要求：

点击每行后面的修改，能将该行的值回填到下面表单。此时点击表单的保存按钮，将表单内容回填到列表对应的行。
点击每行后面的删除，能删除这一行。删除前提示是否删除
如果进来直接填表单，点击表单的保存则新增一行数据到列表中。
点击表头的复选框，能实现全选，取消任意一行的复选框时，自动取消表头的复选框。如果把表头以外的复选框全选中，则自动勾选上表头的复选框。
假设复选框选中了3行数据，点击最上面的删除选中按钮，则能删除被勾选的数据，如果一行都没有选中，提示必须选中一行

一.css代码

    <style>
            td{
                text-align: center;
                width: 40px;
            }
            th{
                background-color:  rgb(46, 142, 202);
                width: 40px;
            }
            .b1{
                margin-bottom: 20px;
            }
            .d1{
                display: flex;
                flex-direction: column;
                text-align: center;
            }
            .i1{
                width: 241px;
                height: 25px;
                margin-top: -6px;
            }
            h1{
                margin-top: 80px;
            }
            .i2{
                width: 50px;
                margin-left: 750px;
            }
        </style>

二.html代码

三.js代码

1.删除思路：先获取a标签，然后通过a标签获取tr标签，通过tr.remove()方法进行删除。

2.新增思路：获取输入框中的文本，并存入相应的变量中。新建tr标签，获取div中的tbody标签，将tr标签插入tbody中，然后将变量中的值赋给tr对应标签中。

3.修改思路：先获取点击行的文本值，将获取到的值传入输入框中。定义一个全局变量，将获取的文本值传入到全局变量中。将h1标签中的文本由新增改为修改。设置状态，如果是新增状态，则调用新增方法，如果是修改状态，则将修改后的输入框中的值传入到div中,并调用重置方法，将输入框中的值清空，回归新增状态。

注：只有form标签才能调用reset()方法（重置），而table标签不行；

4.复选框全部选中或者全部取消思路：获取a标签并调用checked方法（意味选中）,并进行判断，如果为true则全部选中，如果为false则全部取消。

5.如果一个复选框没选中，则全选框也要取消思路：首先判断当前行是否选中，如果当前行没选中，则全部为false，如果当前行选中，则对其他行进行判断，如果其他行中有某行没选中，则为false，如果全部选中，则为true。

6.批量删除：首先获取行标签，然后对复选框进行判断，如果复选框选中，则对其进行删除，如果一行都没选中，则对用户进行提示。

// 设置全局变量

let checkTr;

        // 获取table标签
        let table=document.getElementById("table");
        
        // 保存
        // 设置状态
        function save(){
            // 新增修改状态
            let status=document.getElementsByTagName("h1")[0].innerText;
            if(status=="新增"){
                add();
            }else{
                // 将表中数据修改
                let name=document.getElementById("i3").value;
                let age=document.getElementById("i4").value;
                let sex=document.getElementById("i5").value;
                checkTr.children[1].innerText=name;
                checkTr.children[2].innerText=age;
                checkTr.children[3].innerText=sex;
                
                // 清空表中数据，回归新增状态
                document.getElementsByTagName("form")[0].reset();
                document.getElementsByTagName("h1")[0].innerText="新增";
                checkTr=null;
            }
        }
        
        // 删除功能
        function deleteRow(a){
            let s=confirm("是否删除？")
            if(s==true){
                let tr=a.parentElement.parentElement
                // 通过tr标签来实现删除，自己删除自己
                tr.remove()
            }
        }
        
        // 新增功能
        function add(){
            let tbody = document.getElementsByTagName("tbody")[0];
            // 获取文本
            let name=document.getElementById("i3").value;
            let age=document.getElementById("i4").value;
            let sex=document.getElementById("i5").value;
            
                // 将tr标签插入到tbody中
                let tr = document.createElement("tr")
                tbody.appendChild(tr)
                            
                // 创建标签
                let td1=document.createElement("td")
                let td2=document.createElement("td")
                let td3=document.createElement("td")
                let td4=document.createElement("td")
                let td5=document.createElement("td")
                let td6=document.createElement("td")
                
                // 在tr中插入td标签
                tr.appendChild(td1)
                tr.appendChild(td2)
                tr.appendChild(td3)
                tr.appendChild(td4)
                tr.appendChild(td5)
                tr.appendChild(td6)
                
                td1.innerHTML='<input type="checkbox" class="t1" οnclick="check()">'
                td2.innerText=name
                td3.innerText=age
                td4.innerText=sex
                td5.innerHTML='<a href="#" οnclick="update(this)">修改</a>'
                td6.innerHTML='<a href="#" οnclick="deleteRow(this)">删除</a>'
                
                // 重置表单
                document.getElementsByTagName("form")[0].reset();
        }
        
        // 修改()
        // 将原表中的数据回显
        function update(a){
        //将a父的父标签传入到checkTr中，也就是将tr标签中的值传入到checkTr中
        checkTr=a.parentElement.parentElement;
            let tds=checkTr.children;
            
            // 将表格中原有文本中的值传入到变量中
            let name=tds[1].innerText;
            let age=tds[2].innerText;
            let sex=tds[3].innerText;
            
            // 将变量中值传入到输入框中
            document.getElementById("i3").value=name;
            document.getElementById("i4").value=age;
            document.getElementById("i5").value=sex;
            
            // 将文本改为修改
            document.getElementsByTagName("h1")[0].innerText="修改";
        }
        
        // 按钮复选框  新增复选框
        function check(){
            // 如果有一个复选框没选中，那么全选框也要取消勾选
            if(!this.checked){
                document.getElementById("checkAll").checked=false;
            }else{
                let rs=true;
                let ck=document.getElementsByClassName("t1");
                for (var i = 0; i < ck.length; i++) {
                    if(ck[i].checked==false){
                        rs=false;
                        break;
                    }
                }
                if(rs==true){
                    document.getElementById("checkAll").checked=true;
                }
            }
        }
        
        // 全部选中或者全部取消
        function checkAlls(e){
            // checked意味是否选中
            if(e.checked){
                // t1全部选中
                // 均为true,否则为false
                let ck=document.getElementsByClassName("t1");
                for (var i = 0; i < ck.length; i++) {
                    ck[i].checked=true;
                }
            }else{
                let ck=document.getElementsByClassName("t1");
                for (var i = 0; i < ck.length; i++) {
                    ck[i].checked=false;
            }
        }
    }
        
        // 批量删除
        function delBatch(){
            let rs=false;
            let ck=document.getElementsByClassName("t1");
            for (var i = 0; i < ck.length; i++) {
                if(ck[i].checked==true){
                    rs=true;
                    break;
                }
            }
            
            // 如果一行都没选中，就对用户进行提示
            if(!rs){
                alert("至少选择一行");
                return;
            }
            
            // 将选中的行进行删除
            for (var i = ck.length-1; i >= 0; i--) {
                if(ck[i].checked==true){
                    ck[i].parentNode.parentNode.remove();
                }
            }
        }
    </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/888723