动态表格简易版本-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_nevermore/article/details/128676608

此HTML代码实现了一个交互式的学生信息表格，包含学号、姓名等字段。表格行颜色交错，奇数行黑色背景，偶数行白色。每个行末都有删除按钮，点击后会弹出确认删除的提示。同时，页面上有一个添加按钮，点击后显示输入表单，允许添加新学生信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求：
1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓名、
性别、二级学院、班级、专业、辅导员；
2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底色为黑色；
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容
，并且删除后上述的颜色规律保持不变：
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以
填加新的学生的信息。
原理：
白底与黑底：通过nthchild 2n和 2n-1来控制奇数行和偶数行
删除按钮：获取删除的元素，通过自定义属性与for循环拿到改行的序号，然后获取到父元素，删除掉这一行
添加按钮：新的信息弹窗先隐藏，鼠标点击后显示为块，里面为input 可以获取它的value值，￥{}与波浪号下面的点并通过innerhtml使其以字符串的形式加到html中。通过删除这个元素来获取到其父元素并往里面加入

<!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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }

    table {
        margin-left: 400px;
    }

    #bigbox td {
        width: 150px;
        text-align: center;
    }

    #bigbox {
        position: relative;
    }

    #bigbox tr:nth-child(2n) {
        color: white;
        background-color: black;
    }

    #bigbox tr:nth-child(2n-1) {
        color: black;
        background-color: white;
    }

    #add {
        width: 100px;
        font-weight: bolder;
        height: 100px;
        line-height: 100px;
        text-align: center;
        left: 1634px;
        top: 0px;
        bottom: 272px;
        position: absolute;
        font-size: 15px;
    }

    #table2 {
        border: 10px solid red;
        width: 300px;
        height: 500px;
        z-index: 10;
        position: absolute;
        left: 500px;
        top: 200px;
        background-color: aquamarine;
        display: none;
    }

    #table2 td {
        height: 50px;
    }

    #table2 tr:nth-child(8) {
        display: flex;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    #table2 tr:nth-child(8) button {
        margin-left: 8px;
        width: 50px;
        height: 50px;
    }
</style>

<body>
    <table border="1" id="bigbox">
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>二级学院</td>
            <td>班级</td>
            <td>专业</td>
            <td>辅导员</td>
            <td>删除键</td>
        </tr>
        <tr>
            <td>22232301</td>
            <td>王德发</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222323</td>
            <td>计算机科学与技术</td>
            <td>阿迪是</td>
            <td style="cursor: pointer;" class="deleter h">删除</td>
        </tr>
        <tr>
            <td>22232302</td>
            <td>小明</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222323</td>
            <td>计算机科学与技术</td>
            <td>阿迪是</td>
            <td style="cursor: pointer;" class="deleter h">删除</td>
        </tr>
        <tr>
            <td>22232303</td>
            <td>王飞</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222323</td>
            <td>计算机科学与技术</td>
            <td>阿迪是</td>
            <td style="cursor: pointer;" class="deleter h">删除</td>
        </tr>
        <tr>
            <td>22232304</td>
            <td>高飞钱</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222323</td>
            <td>计算机科学与技术</td>
            <td>阿迪是</td>
            <td style="cursor: pointer;" class="deleter h">删除</td>
        </tr>
        <tr>
            <td>22232305</td>
            <td>思想者</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222323</td>
            <td>计算机科学与技术</td>
            <td>阿迪是</td>
            <td style="cursor: pointer;" class="deleter h">删除</td>
        </tr>
        <tr>
            <td>22232306</td>
            <td>阿萨德了</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222323</td>
            <td>计算机科学与技术</td>
            <td>阿迪是</td>
            <td style="cursor: pointer;" class="deleter h">删除</td>
        </tr>
        <tr>
            <td>22232307</td>
            <td>米夏</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222323</td>
            <td>计算机科学与技术</td>
            <td>阿迪是</td>
            <td style="cursor: pointer;" class="deleter h">删除</td>
        </tr>
        <tr>
            <td>22232308</td>
            <td>马赛克</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222323</td>
            <td>计算机科学与技术</td>
            <td>阿迪是</td>
            <td style="cursor: pointer;" class="deleter h">删除</td>
        </tr>
        <tr>
            <td>22232309</td>
            <td>迪斯科</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222323</td>
            <td>计算机科学与技术</td>
            <td>阿迪是</td>
            <td style="cursor: pointer;" class="deleter h">删除</td>
        </tr>
        <tr>
            <td>222323010</td>
            <td>虚空魔石</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222323</td>
            <td>计算机科学与技术</td>
            <td>阿迪是</td>
            <td style="cursor: pointer;" class="deleter h">删除</td>
        </tr>
        <button id="add">添加学生信息</button>



    </table>
    <table id="table2">
        <tr>
            <td>学号:<input type="text" id="xuehao"></td>
        </tr>
        <tr>
            <td>姓名:<input type="text" id="xingming"></td>
        </tr>
        <tr>
            <td>性别:<input type="text" id="xingbie"></td>
        </tr>
        <tr>
            <td>二级学院:<input type="text" id="xueyuan"></td>
        </tr>
        <tr>
            <td>班级:<input type="text" id="banji"></td>
        </tr>
        <tr>
            <td>专业:<input type="text" id="zhuanye"></td>
        </tr>
        <tr>
            <td>辅导员:<input type="text" id="daoyuan"></td>
        </tr>
        <tr>
            <td><button id="tijiao">提交</button></td>
            <td><button id="tuichu">退出</button></td>
        </tr>
    </table>
    <script>
        h = document.querySelectorAll(".h")
        bigbox = document.getElementById("bigbox")
        var otr = document.getElementsByTagName("tr")
        var tbody = document.getElementById("tbody")
        add = document.getElementById("add")
        console.log(add)

        deleterrr()

        function deleterrr() {
            var deleter = document.querySelectorAll(".deleter")
            for (z = 0; z < deleter.length; z++) {

                deleter[z].dataset.index = z;
                deleter[z].onclick = function () {
                    var a = Number(this.dataset.index)


                    getalltr()

                    if (confirm("确认删除？")) { deleter[a].parentElement.remove() }

                }
            }
        }


        function getalltr() {


            for (i = 0; i < otr.length; i++) {
                otr[i].dataset.index = i

            }


        }
        add.onclick = function () {
            table2.style.display = "block"
        }
        tuichu.onclick = function () {
            table2.style.display = "none"
        }
        tijiao.onclick = function () {

            var deleter = document.querySelectorAll(".deleter")
            var tr = document.createElement("tr");
            tr.innerHTML = `<td>${xuehao.value}</td><td>${xingming.value}</td><td>${xingbie.value}</td><td>${xueyuan.value}</td><td>${banji.value}</td><td>${zhuanye.value}</td><td>${daoyuan.value}</td><td style="cursor: pointer;" class="deleter h">删除</td> `
            h[0].parentElement.parentElement.appendChild(tr)
            xuehao.value = ""
            xingbie.value = ""
            xingming.value = ""
            xueyuan.value = ""
            banji.value = ""
            zhuanye.value = ""
            daoyuan.value = ""
            deleter = document.querySelectorAll(".deleter")
            deleterrr()
        }





    </script>
</body>

</html>

在这里插入图片描述