动态表格js

最新推荐文章于 2023-07-18 14:09:41 发布

black_tea114514

最新推荐文章于 2023-07-18 14:09:41 发布

阅读量382

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/black_tea114514/article/details/128723141

版权

要求：

1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓名、性别、二级学院、班级、专业、辅导员；
2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底色为黑色；
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变：
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。

思路：

获取input的value值，添加新的节点tr和td，插入进去

代码：

<style>
        a{text-decoration:none}
        .box{
            background-color:antiquewhite;
            position: relative;
        }
        table{
            margin: 0 auto;
            text-align: center;
            width: 100%;
            padding-top: 10px;
        }
        tr{
            width: 100%;
        }
        th{
            width:12.5%;
        }
        .tianjia{
            position: absolute;
            right: 0;
            top: 0;
        }
        .box tr:nth-child(2n){
            background-color: #fff;
            color: #000;
        }
        .box tr:nth-child(2n-1){
            background-color: rgb(0, 0, 0);
            color: #fff;
        }
        .add{
            width: 600px;
            height: 400px;
            background-color: rgba(0,0,0,0.5);
            margin: 0 auto;
            color: #fff;
            position:absolute;
            left: 500px;
        }
        .add div{
            text-align: center;
        }
        .add div input{
            width: 60%;
            margin-top: 20px;
            height: 25px;
        }
        .tijiao{
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        a{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        <table cellspacing="20">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>二级学院</td>
                <td>班级</td>
                <td>专业</td>
                <td>辅导员</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>11</td>
                <td>3</td>
                <td>n</td>
                <td>s</td>
                <td>3</td>
                <td>5</td>
                <td>111</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>11</td>
                <td>3</td>
                <td>n</td>
                <td>s</td>
                <td>3</td>
                <td>5</td>
                <td>111</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>11</td>
                <td>3</td>
                <td>n</td>
                <td>s</td>
                <td>3</td>
                <td>5</td>
                <td>111</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>11</td>
                <td>3</td>
                <td>n</td>
                <td>s</td>
                <td>3</td>
                <td>5</td>
                <td>111</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>11</td>
                <td>3</td>
                <td>n</td>
                <td>s</td>
                <td>3</td>
                <td>5</td>
                <td>111</td>
                <td><a href="#">删除</a></td>
            </tr>
        </table>
        <button class="tianjia">添加</button>
        <div class="add" style="display: none;">
            <div><input type="text" placeholder="请输入学号" class="num"></div>
            <div><input type="text" placeholder="请输入姓名" class="name"></div>
            <div><input type="text" placeholder="请输入性别" class="gender"></div>
            <div><input type="text" placeholder="请输入二级学院" class="college"></div>
            <div><input type="text" placeholder="请输入班级" class="class"></div>
            <div><input type="text" placeholder="请输入专业" class="major"></div>
            <div><input type="text" placeholder="请输入辅导员" class="instructor"></div>
            <button class="tijiao">提交</button>
        </div>
    </div>
    <script>
        var add= document.querySelector(".add")
        var tijiao = document.querySelector(".tijiao")
        var tianjia = document.querySelector(".tianjia")
        var num = document.querySelector(".num")
        var name = document.querySelector(".name")
        var gender = document.querySelector(".gender")
        var college = document.querySelector(".college")
        var className = document.querySelector(".class")
        var major = document.querySelector(".major")
        var instructor = document.querySelector(".instructor")
        var table = document.querySelector("table")
      
        tianjia.onclick = function(){
            add.style = "display: block"
        }
        tijiao.onclick = function(){
            add.style = "display: none"
            var num_value = num.value
            var name_value = name.value
            var gender_value = gender.value
            var college_value = college.value
            var className_value = className.value
            var major_value = major.value
            var instructor_value = instructor.value
            var tr = document.createElement("tr");
            table.appendChild(tr)
            var numtd = document.createElement('td')
            var nametd = document.createElement('td')
            var gendertd = document.createElement('td')
            var collegetd = document.createElement('td')
            var classtd = document.createElement('td')
            var majortd = document.createElement('td')
            var instructortd = document.createElement('td')
            var atd = document.createElement('td')
            numtd.innerHTML = `${num_value}`
            nametd.innerHTML = `${name_value}`
            gendertd.innerHTML = `${gender_value}`
            collegetd.innerHTML = `${college_value}`
            classtd.innerHTML = `${className_value}`
            majortd.innerHTML = `${major_value}`
            instructortd.innerHTML = `${instructor_value}`
            atd.innerHTML = `<a herf="#">删除<a>`
            tr.appendChild(numtd)
            tr.appendChild(nametd)
            tr.appendChild(gendertd)
            tr.appendChild(collegetd)
            tr.appendChild(classtd)
            tr.appendChild(majortd)
            tr.appendChild(instructortd)
            tr.appendChild(atd)
        }
        var a=document.querySelectorAll("a")
        for(var i=0;i<a.length;i++){
            a[i].onclick=function(){
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
    </script>