js实现表格增删和遮罩层

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /**{*/
            /*padding: 0;*/
            /*margin: 0;*/
        /*}*/
        .ta{
            margin-left: 200px;
            width: 800px;
            position: fixed;
        }
        table{
            width: 100%;
            border-collapse: collapse;
        }
        th ,td{
            text-align: center;
            border: #b0b0b0 solid;
        }
        .hide{
            display: none;
        }
        .c1{
           position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background: azure;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -100px;
            z-index: 10;
        }
        .cz{
            padding-left: 150px;
            padding-top: 50px;
        }
    </style>
</head>
<body>
    <div class="ta">
        <table>
            <caption>员工信息表</caption>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>部门</th>
                    <th>薪水</th>
                    <th>操作<button onclick="ShowModle()">添加</button></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>22</td>
                    <td>研发部</td>
                    <td>20k</td>
                    <td>
                        <button class="b1">删除</button>
                        <button>编辑</button>
                    </td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>22</td>
                    <td>研发部</td>
                    <td>20k</td>
                    <td>
                        <button class="b1">删除</button>
                        <button>编辑</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- 遮罩层开始-->
    <div id="i1" class="c1 hide"></div>
    <!-- -->
    <div id="i2" class="c2 hide">
        <div class="cz">
            <p>
                <label for="name">姓名：</label>
                <input id="name" value="" type="text"/>
            </p>
            <p>
                <label for="age">年龄：</label>
                <input id="age" value="" type="text"/>
            </p>
            <p>
                <label for="department">部门：</label>
                <input id="department" value="" type="text"/>
            </p>
            <p>
                <label for="salary">薪水：</label>
                <input id="salary" value="" type="text"/>
            </p>
            <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" value="取消" onclick="HideModle()"/>
                <input type="button" value="确定" onclick="Add()"/>
            </p>
        </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
        function ShowModle() {
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
        function HideModle() {
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }
        // function Del() {
        //             // console.log($(this));
        //     let b1 = document.getElementsByClassName('b1');
        //     for (let i=0; i<b1.length; i++){
        //         // let index = b1[i];
        //         // console.log(index);
        //         // for (let j=0; j<b1.length; j++){
        //         //     if(b1[i] === b1[j]){
        //         //         console.log(b1[i].parentNode.parentNode);
        //         //         // console.log(b1[index].parentNode.parentNode);
        //         //     }
        //         // }
        //         console.log(b1[i].parentNode.parentNode);
        //     }
        //
        // }
        let b1 = document.getElementsByClassName('b1');
        for (let i=0; i<b1.length; i++){
            b1[i].onclick = function () {
                // console.log(this);
                console.log(this.parentNode.parentNode);

                this.parentNode.parentNode.innerHTML=''
            }
        }

        function Add(){
            let name = document.getElementsByTagName('input')[0].valueOf().value;
            let age = document.getElementsByTagName('input')[1].valueOf().value;
            let salary = document.getElementsByTagName('input')[2].valueOf().value;
            let department = document.getElementsByTagName('input')[3].valueOf().value;
            let htm = `
                <tr>
                    <td>${name}</td>
                    <td>${age}</td>
                    <td>${salary}</td>
                    <td>${department}</td>
                    <td>
                        <button class="b1">删除</button>
                        <button>编辑</button>
                    </td>
                </tr>
            `;
            // document.write(htm);
            let old = document.getElementsByTagName('tbody')[0].innerHTML;
            // document.write(old, typeof old);
            document.getElementsByTagName('tbody')[0].innerHTML = old + htm;

            let b1 = document.getElementsByClassName('b1');
            for (let i=0; i<b1.length; i++){
                b1[i].onclick = function () {
                    // console.log(this);
                    console.log(this.parentNode.parentNode);

                    this.parentNode.parentNode.innerHTML=''
                }
            }
        }



        // for (let i=0; i<inp.length; i++) {
        //     // console.log(inp[i]);
        //     let name = inp[]
        // }

    </script>
</body>
</html>
View Code

 

posted @ 2019-04-23 22:06  平平无奇小辣鸡  阅读(270)  评论(0)    收藏  举报