002-js基础笔记_博学谷遮罩层-CSDN博客

本文链接：https://blog.csdn.net/smiple9102/article/details/78105153
表格增删改dom基础操作
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .contain {
            width: 350px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
        }

        table {
            width: 100%;
            text-align: center;
            margin-top: 10px;
        }

        thead {
            background-color: lightgreen;
        }

        tbody {
            background-color: whitesmoke;
            border: none;
        }

        tr {
            height: 30px;
        }
        /*遮罩层样式*/

        .bg-box {
            width: 100%;
            height: 100%;
            opacity: 0.4;
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }

        .show-box {
            width: 260px;
            height: 260px;
            background-color: pink;
            margin: 0 auto;
            position: fixed;
            top: 200px;
            left: -130px;
            margin-left: 50%;
            display: none;
        }

        .show-box input {
            height: 24px;
        }

        .show-head {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: lightgreen;
            text-align: center;
            position: relative;
        }

        .userName,
        .userNumber {
            margin: 20px 15px;
        }

        .over {
            width: 60px;
            height: 30px;
            background-color: green;
            position: absolute;
            margin-left: 50%;
            left: -30px;
        }

        #close {
            position: absolute;
            top: -5px;
            right: 7px;
        }
    </style>
</head>

<body>
    <div class="contain">
        <input type="button" value="点击增加" class="add" id="id-add">
        <!--表格start-->
        <table border=0 cellpadding=0 cellspacing=0>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>学号</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="id-tbody">
                <!--<tr>
                    <td>张三</td>
                    <td>001</td>
                    <td>
                        <a href="#">删除</a>
                    </td>
                </tr>-->
            </tbody>
        </table>
        <!--表格end-->
        <!--模态框start-->
        <!--遮罩层-->
        <div class="bg-box" id="bgBox"></div>

        <div class="show-box" id="showBox">
            <div class="show-head">
                <p>欢迎来到博学谷</p>
                <a href="#" id="close">X</a>
            </div>
            <div class="userName">
                姓名：<input type="text" id="userName">
            </div>
            <div class="userNumber">
                学号：<input type="text" id="userNumber">
            </div>
            <input type="button" value="完成" class="over" id="over">

        </div>
        <!--模态框end-->
    </div>
</body>
<script>
    //第一：点击增加按钮实现模态框显示
    var add = document.getElementById('id-add');
    var bgBox = document.getElementById('bgBox');
    var showBox = document.getElementById('showBox');
    var close = document.getElementById('close');
    var userName = document.getElementById('userName');
    var userNumber = document.getElementById('userNumber');
    var tbody = document.getElementById('id-tbody');

    add.onclick = function () {
        bgBox.style.display = 'block';
        showBox.style.display = 'block';

        //第二：点击关闭按钮，关闭模态框
        close.onclick = function () {
            // 1）清空文本框中的值
            userName.value = '';
            userNumber.value = '';
            bgBox.style.display = 'none';
            showBox.style.display = 'none';

        }//close.onclick函数完毕
        //第三：点击完成按钮，关闭模态框
        over.onclick = function () {
            // 第一步先判断模态框中是否有值，如果没有值提示用户输入内容
            if (userName.value && userNumber != '') {
                bgBox.style.display = 'none';
                showBox.style.display = 'none';
                //动态创建表格
                //创建tr标签
                var tr = document.createElement('tr');
                tbody.appendChild(tr);
                // 生成第一列td单元格
                var td1 = document.createElement('td');
                tr.appendChild(td1);
                td1.innerHTML = userName.value;
                // 生成第二列td单元格
                var td2 = document.createElement('td');
                tr.appendChild(td2);
                td2.innerHTML = userNumber.value;
                // 生成第三列td单元格
                var td3 = document.createElement('td');
                tr.appendChild(td3);
                td3.innerHTML = "<a href='#' class='del'>删除</a>"


                var del = document.getElementsByClassName("del");//获取的伪数组，循环遍历
                for (var i = 0; i < del.length; i++) {//循环，解决只能获取一个的问题
                    // 点击删除按钮删除当前行
                    del[i].onclick = function () {
                        //tbody.removeChild(tr);
                        //this.parentNode.parentNode.innerHTML='';
                        tbody.removeChild(this.parentNode.parentNode)//删除行的另一种方式

                    }
                }//for循环结束

            } else {
                alert("请输入姓名和学号");
            }



            // 1）清空文本框中的值
            userName.value = '';
            userNumber.value = '';
            // bgBox.style.display = 'none';
            // showBox.style.display = 'none';
        }//over.onclick函数完毕
    }//add.onclick函数完毕

</script>

</html>