JavaScript第五天作业02——表格

最新推荐文章于 2024-09-12 14:28:05 发布

·青红造了个白·

最新推荐文章于 2024-09-12 14:28:05 发布

阅读量84

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43861647/article/details/119381492

版权

<!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>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            table{
                border-collapse: collapse;
                margin:20px auto;
            }
            td{
                border:1px solid red;
                width:100px;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
            }
            body{
                text-align: center;
            }
            .head{
                font-weight: bold;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <input type="text" placeholder="请输入用户名" id="user">
        <br><br>
        <input type="text" placeholder="请输入学号" id="userid">
        <br><br>
        <button id="add">新增</button>
        <button id="alldel">全部删除</button>
        <table id="box">
            <tr class="head">
                <td>选择</td>
                <td>姓名</td>
                <td>学号</td>
                <td>删除</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>xxx</td>
                <td>学号</td>
                <td  onclick="del(this)">删除</td>
            </tr>
        </table>
        <button id="all">全选</button>
        <button id="reg">反选</button>
        <button id="not">全不选</button>
        <script>
            var tags=document.getElementsByClassName('check')
            // 新增
            add.onclick=function(){
                var user1=user.value;
                var userid1=userid.value;
                // 创建标签
                var tr=document.createElement('tr');
                tr.innerHTML=`<td><input type="checkbox" class="check"></td>
                <td>${user1}</td>
                <td>${userid1}</td>
                <td onclick="del(this)">删除</td>`;
                // 追加
                user.value = '';
                userid.value = '';
                box.appendChild(tr);
            }
            // 单个删除
            function del(a){
                a.parentNode.parentNode.removeChild(a.parentNode);
            }
            all.onclick=function(){
                for(var i=0;i<tags.length;i++){
                    tags[i].checked=true;
                }
            }
            not.onclick=function(){
                for(var i=0;i<tags.length;i++){
                    tags[i].checked=false;
                }
            }
            reg.onclick=function(){
                for(var i=0;i<tags.length;i++){
                    // 获取值取反以后重新赋值
                    tags[i].checked= !tags[i].checked;
                }
            }
            alldel.onclick=function(){
                for(var i=0;i<tags.length;i++){
                    if(tags[i].checked){
                        tags[i].parentNode.parentNode.parentNode.removeChild(tags[i].parentNode.parentNode);
                        i--;//删除i位置的元素之后，i+1到末尾这些数都会往前移一位；所以需要-1，下次进入循环再+1，重新判断i的位置，直到删除所有要删除的元素
                    }
                }
            }
        </script>
    </body>
</html>