【js实战篇】表格的全选和删除

悠悠~飘

已于 2022-04-14 17:03:53 修改

阅读量1.7k

点赞数 9

分类专栏： js实战篇 js基础入门篇文章标签： javascript bootstrap html

于 2022-01-09 16:39:22 首次发布

本文链接：https://blog.csdn.net/weixin_48813932/article/details/122395421

版权

js实战篇同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

js基础入门篇

6 篇文章 0 订阅

订阅专栏

本篇用到了table布局，数组循环和节点的相关操作，引入了bootstrap的表格css文件。

下面是代码，有需要自取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
    <table border="1" class="table table-hover table-bordered">
        <tbody id="table">
            <tr class="bg-danger">
                <td>全选
                    <input type="checkbox" class="selectAll"> 反选
                    <input type="checkbox" class="reverseSelect">
                </td>
                <td>学号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>院校</td>
                <td>籍贯</td>
                <td>身份证</td>

                <td>删除</td>
                <td>修改</td>
            </tr>

        </tbody>

    </table>
    <button onclick="del()">选中删除</button>
    <script>
        var arr = [{
                "id": "1",
                "姓名": "张三",
                "年龄": "18",
                "性别": "男",
                "学院": "武汉职业技术学院",
                "籍贯": "湖北",
                "身份证号": "42110********"
            }, {
                "id": "2",
                "姓名": "李四",
                "年龄": "18",
                "性别": "男",
                "学院": "武汉职业技术学院",
                "籍贯": "湖北",
                "身份证号": "42110********"
            }, {
                "id": "3",
                "姓名": "王五",
                "年龄": "18",
                "性别": "男",
                "学院": "武汉职业技术学院",
                "籍贯": "湖北",
                "身份证号": "42110********"
            }, {
                "id": "4",
                "姓名": "赵六",
                "年龄": "18",
                "性别": "男",
                "学院": "武汉职业技术学院",
                "籍贯": "湖北",
                "身份证号": "42110********"
            }, {
                "id": "5",
                "姓名": "田七",
                "年龄": "18",
                "性别": "男",
                "学院": "武汉职业技术学院",
                "籍贯": "湖北",
                "身份证号": "42110********"
            }

        ];
        var tbody = document.getElementById("table");

        for (i in arr) {
            var tr = document.createElement("tr");
            var sid = arr[i]["id"]
            tr.id = "tr" + sid; //tr1
            tr.innerHTML = "<td><input type ='checkbox' name = 'select' class='s' /></td>";
            for (j in arr[i]) {
                var td = document.createElement("td");
                tr.appendChild(td);
                td.innerHTML = arr[i][j];
            }
            tdBt1 = td.cloneNode(true);
            tdBt1.innerHTML = `<td><input type ='submit' value = '删除' onclick = "fn('${sid}')" /></td> `;
            tr.appendChild(tdBt1);

            tdBt2 = td.cloneNode(true);
            tdBt2.innerHTML = "<td><input type ='submit' value = '修改' /></td>";
            tr.appendChild(tdBt2);
            tbody.appendChild(tr);
        }


        var checkInput = document.querySelector("input.selectAll");
        var selectList = document.getElementsByName("select");
        checkInput.onclick = function() {
            for (var i = 0; i < selectList.length; i++)
                if (checkInput.checked) {

                    selectList[i].checked = true;
                    reverseSelect.checked = false

                } else {
                    selectList[i].checked = false
                }


        }
        var reverseSelect = document.querySelector("input.reverseSelect");

        reverseSelect.onclick = function() {

            for (var i = 0; i < selectList.length; i++) {

                if (reverseSelect.checked) {
                    selectList[i].checked = !selectList[i].checked;
                    checkInput.checked = false


                } else {
                    selectList[i].checked = !selectList[i].checked;


                }
            }
        }

        function fn(id) {
            var tr = document.getElementById("tr" + id);

            tr.remove();
        }
        //方法一常规for循环
        // function del() {
        //     var selectList = document.querySelectorAll(".s");
        //     console.log(selectList)
        //     var num = 0;
        //     for (var i = 0; i < selectList.length; i++) {
        //         ++num;
        //         console.log(num);
        //         if (selectList[i].checked) {
        //             var parent = selectList[i].parentNode.parentNode;
        //             console.log(parent);
        //             parent.remove();

        //         }
        //     }

        // }


        /**/
        // 方法二过滤器循环
        function del() {
            var selectList = document.querySelectorAll(".s");
            var newArr = [];
            for (var i = 0; i < selectList.length; i++) {

                newArr.push(selectList[i].checked);


            }

            var newSelect = arr.filter(
                function(v, index) {

                    if (newArr[index] == true) {
                        console.log(v);
                        delete arr[index];
                        var parent = selectList[index].parentNode.parentNode;
                        parent.remove();
                    }


                }
            )
        }
    </script>
</body>

</html>

下面是结果

以上就是全部。

也希望和大佬们多多交流！😀😀😀

悠悠~飘

关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
【js实战篇】表格的全选和删除

本篇用到了table布局，数组循环和节点的相关操作，引入了bootstrap的表格css文件。下面是代码，有需要自取<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=
复制链接

扫一扫