前端学习-第二阶段-day09

最新推荐文章于 2021-12-19 14:42:58 发布

澜痕

最新推荐文章于 2021-12-19 14:42:58 发布

阅读量92

点赞数

分类专栏：前端学习日记

本文链接：https://blog.csdn.net/qq_34723035/article/details/111876246

版权

前端学习日记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

今日练习

根据输入内容自动添加表格，点击全选可全选，被选中的点删除所选行，可删除，当每个分类都被选中时，全选按钮自动被选中在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            outline: none;

        }

        .box {
            margin: 40px 0px 40px 100px;
            width: 510px;
        }

        span {
            color: #2b2a24;
        }

        .head {
            margin: auto;
            width: 494px;
            padding-left: 5px;
            padding-top: 10px;
            border: 1px solid #ccc;
        }

        input {
            margin-bottom: 10px;
        }

        button {
            float: right;
            margin-right: 10px;
        }

        table {
            margin: 40px auto;
            text-align: center;
            border-spacing: 0px;
            border-collapse: collapse;

        }

        th {
            border: 1px solid #787878;
            line-height: 29px;
        }

        tr {

            line-height: 29px;
        }

        td {
            border: 1px solid #787878;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="head">
            <span>请输入姓名：</span>
            <input type="text"><br>
            <span>请选择性别：</span>
            <input type="radio" name="sex" checked> 男
            <input type="radio" name="sex"> 女<br>
            <span>请输入年龄：</span>
            <input type="text">
            <button>添加到表格</button>
        </div>
        <table width='500'>
            <!-- 表格头部 -->
            <thead>
                <tr>
                    <th width="19%"><input type="checkbox"> 全选</th>
                    <th width="27%">姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <!-- 表格主体 可以有任意多个 -->
            <tbody>
                <tr>
                    <td><input type="checkbox"></th>
                    <td>王舞</td>
                    <td>女</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></th>
                    <td>李思</td>
                    <td>男</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></th>
                    <td>王二麻子</td>
                    <td>女</td>
                    <td>20</td>
                </tr>
            </tbody>
            <tfoot></tfoot>

        </table>
        <button>删除所选行</button>
    </div>

    <script>
        //获取tbody
        var oTbody = document.getElementsByTagName("table")[0].tBodies[0];
        var oBtn1 = document.getElementsByTagName("button")[0];
        var oBtn2 = document.getElementsByTagName("button")[1];
        var oIn = document.getElementsByTagName("input");
        var oTIn = oTbody.getElementsByTagName("input");
        var oTr = oTbody.getElementsByTagName("tr");
        var k=0;
        //1.点击添加按钮，在表格中添加一行
        oBtn1.onclick = function () {
            //3.创建行
            var oTr = document.createElement("tr");
            var oTd1 = document.createElement("td");
            var oTd2 = document.createElement("td");
            var oTd3 = document.createElement("td");
            var oTd4 = document.createElement("td");

            //添加复选框
            oTd1.innerHTML = '<input type="checkbox">';
            oTr.appendChild(oTd1);

            //添加姓名
            oTd2.innerHTML = oIn[0].value;
            oTr.appendChild(oTd2);

            //添加性别
            var sex = oIn[1].checked == true ? "男" : "女";
            oTd3.innerHTML = sex;
            oTr.appendChild(oTd3);

            //添加年龄
            oTd4.innerHTML = oIn[3].value;
            oTr.appendChild(oTd4);

            //2.在表格中添加一行 
            oTbody.appendChild(oTr);

            
            for (var i = 0; i < oTIn.length; i++) {
            oTIn[i].onclick = function () {
                if (this.checked == true) {
                    k++;
                    if(k>oTIn.length){
                            k=oTIn.length;
                        }
                    console.log(k);
                } else if (this.checked != true) {
                    k--;
                    if(k<0){
                        k=0;
                    }
                    console.log(k);
                };
                if (k == oTIn.length) {
                    oIn[4].checked = true
                } else {
                    oIn[4].checked = false
                }
            }
            if (k == oTIn.length) {
                        oIn[4].checked = true
                    } else {
                        oIn[4].checked = false
                    }
        }


            

        }
        
        //点击删除被勾选的框

        oBtn2.onclick = function () {
            for (var i = 0; i < oTr.length; i++) {
                if (oTIn[i].checked == true) {
                    oTbody.removeChild(oTbody.children[i]);
                    i--;
                    k--;
                }
            }
        }
        //点击全选，再次点击取消全选
        oIn[4].onclick = function () {
            for (var i = 0; i < oTr.length; i++) {
                oTIn[i].checked = oIn[4].checked
            }
        }


        //当所有分类复选框被选中时，让全选选中
       
            for (var i = 0; i < oTIn.length; i++) {
                oTIn[i].onclick = function () {
                    if (this.checked == true) {
                        k++;
                        if(k>oTIn.length){
                            k=oTIn.length;
                        }
                        console.log(k);
                    } else if (this.checked != true) {
                        k--;
                        if(k<0){
                            k=0;
                        }
                        console.log(k);
                    };
                    if (k == oTIn.length) {
                        oIn[4].checked = true
                    } else {
                        oIn[4].checked = false
                    }
                }
            }


       
    </script>
</body>

</html>

澜痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习-第二阶段-day09

今日练习根据输入内容自动添加表格，点击全选可全选，被选中的点删除所选行，可删除，当每个分类都被选中时，全选按钮自动被选中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu
复制链接

扫一扫