动态添加表格（单行删除，全部删除，选中删除，添加表格）

最新推荐文章于 2024-09-27 23:15:00 发布

幼儿崽

最新推荐文章于 2024-09-27 23:15:00 发布

阅读量159

点赞数

文章标签： html javascript dreamweaver Powered by 金山文档

本文链接：https://blog.csdn.net/m0_73917034/article/details/129184330

版权

<!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>Document</title>
    <style>
        td {
            text-align: center;
            border: 1px solid blue;
        }

        th {
            text-align: center;
            border: 1px solid blue;
        }

        table {
            border-collapse: collapse;
            width: 350px;
            height: 70px;
        }
    </style>
</head>

<body>
    <p>姓名：<input type="text" class="inp1"></p>
    <p>年龄：<input type="text" class="inp2"></p>
    <button class="btn1">添加一个学生</button>&emsp;<button class="btn2">全部删除</button>&emsp;<button class="btn3">选中删除</button>
    <br>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" class="all">全选</th>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="one"></td>
                <td>1</td>
                <td>小明</td>
                <td>10</td>
                <td><button class="btn4">删除</button></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="one"></td>
                <td>2</td>
                <td>小方</td>
                <td>8</td>
                <td><button class="btn4">删除</button></td>
            </tr>
        </tbody>


    </table>
    <script>
        // 获取页面元素
        // input
        var input = document.querySelectorAll('input')
        var inp1 = document.querySelector('.inp1');
        var inp2 = document.querySelector('.inp2');
        // button
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        var btn3 = document.querySelector('.btn3');
        var btn4 = document.querySelector('.btn4');
        // 表格
        var table = document.querySelector('table');
        var tbody = document.querySelector('tbody');
        var all = document.querySelector('.all');
        var one = document.querySelector('.one');
        var num = 2;

        // 添加学生
        btn1.onclick = function () {
            //非空判断
            // if (inp1.value.trim() === '') {
            //     alert('内容不能为空');
            // }
            // if (inp2.value.trim() === '') {
            //     alert('内容不能为空');
            // }
            //创建tr节点
            var tr = document.createElement('tr');
            //节点里面设置内容
            num++;
            tr.innerHTML = '<td><input type="checkbox" class="one"></td>\
            <td>'+ num + '</td>\
                <td>'+ inp1.value + '</td>\
                    <td>'+ inp2.value + '</td>\
                    <td><button class="btn4">删除</button></td>'
            // 将创建的节点放入指定位置
            tbody.appendChild(tr);
            // input里的内容自动更新清空
            inp1.value = '';
            inp2.value = '';



            //调用函数
            fan()
            btn4fn()
            Allfn()
        }





        // 全选全不选
        all.onclick = function () {
            var one = document.querySelectorAll('.one');
            console.log(one);
            for (var i = 0; i < one.length; i++) {
                one[i].checked = this.checked;
            }
        }





        // 全选全不选的反向操作
        function fan() {
            var one = document.querySelectorAll('.one')
            for (var i = 0; i < one.length; i++) {
                one[i].onclick = function () {
                    var len1 = one.length;
                    var len2 = document.querySelectorAll('.one:checked').length;
                    var res = len1 === len2 ? true : false;
                    all.checked = res;
                }

            }
        }





        //选中删除
        btn3.onclick = function () {
            var xuanzhong = document.querySelectorAll('.one:checked');
            for (var i = 0; i < xuanzhong.length; i++) {
                xuanzhong[i].parentElement.parentElement.remove(xuanzhong[i].parentElement)
            }
        }




        // 单行删除
        function btn4fn() {
            var tbody = document.querySelector('tbody')
            var btn4 = document.querySelectorAll('.btn4');
            for (var i = 0; i < btn4.length; i++) {
                btn4[i].onclick = function () {
                    this.parentNode.parentNode.remove()
                }
            }
        }




        // 全部删除
        function Allfn() {
            var tbody = document.querySelector('tbody')
            var btn2 = document.querySelector('.btn2')
            btn2.onclick = function () {
                var tr = document.querySelectorAll('tbody>tr')
                for (var i = 0; i < tr.length; i++) {
                    tbody.removeChild(tr[i])
                }
            }
            var all = document.querySelector('.all');
            console.log(all);
            all.checked = false;
        }
    </script>
</body>

</html>