动态表格，-优快云博客

该文章展示了一个使用JavaScript和CSS实现的动态表格，表格包含学生信息，如学号、姓名等。表格行有奇偶行颜色交替，每行末尾有删除按钮，点击后弹出确认删除的提示。添加按钮用于创建新学生信息，弹出表单输入后将新行添加至表格。删除功能通过设置自定义属性来识别并移除特定行。

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

需求

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

效果展示

实现原理

1、先在js中渲染原本10个同学的信息，再利用css的选择器设置奇数偶数行不同的样式
2、在js中每行添加一个按钮节点，设置按钮的点击事件
3、弹框在html中提前设置后隐藏，利用按钮的点击事件显现
4、删除键的功能实现利用给不同行设置自定义属性辨别点击元素后删除一行的节点
5、添加按钮的功能实现利用表单输入框value值得到输入内容后赋予新建节点
6、两个按钮的取消续隐藏弹框即可

代码

JS部分


<script>
        btn = document.getElementById("btn")
        table1 = document.getElementById("table1")
        var otr = document.getElementsByTagName("tr")
        var tbody = document.getElementById("tbody")
       

       function getalltr() {
            for (i = 0; i < otr.length; i++) {

                otr[i].dataset.index = i
            }

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

        tijiao.onclick = function () {

            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 = ""
        }

    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
     *{
         margin: 0;
         padding: 0;
        }
     #table1{
            border: 1px solid #222340;
            margin:100px auto;
            width: 850px;
        }
     
     td,th{
            text-align: center;
            border: 1px solid;
        }
     #table1 tr:nth-child(2n) {
           color: white;
           background-color: black;
        }

     #table1 tr:nth-child(2n-1) {
           color: black;
           background-color: white;
       }
     div{
            text-align: center;
            margin: 50px;
        }
     #table2 {
            width: 260px;
            height: 510px;
            position: absolute;
            right: 500px;
            top: 200px;
            background-color: #9cb8a0;
            display: none;
       }
     #table2 td {
            height: 60px;
       }
     #table2 tr:nth-child(8) {
           display: flex;
           align-items: center;
           justify-content: center;
       }

     #table2 tr:nth-child(8) button {
           width: 50px;
           height: 50px;
       }

     #btn{
         width:70px;
         height:30px;
         position: absolute;
         right: 250px;
         top: 155px;
         line-height: 30px;
         font-size: 16px;
         color: #000000;
         background-color: #599862;
         border-radius:10px;
         cursor: pointer;
      }
 
      #form{
         width: 400px;
         height: 400px;
         margin:100px auto;
         background-color:rgb(247, 247, 247);
         border: 1px solid rgb(41, 41, 41);
         position: relative;
         display: none;
      }
    
    </style>
</head>
<body>
<div id="btn" >添加</div>
<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>

<table id="table1">
    <caption>学生信息表</caption>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>二级学院</th>
        <th>班级</th>
        <th>专业</th>
        <th>辅导员</th>
    </tr>

    <tr>
        <td>22230101</td>
        <td>张某</td>
        <td>女</td>
        <td>计算机工程学院</td>
        <td>222301</td>
        <td>土木工程</td>
        <td>武则天</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>22230101</td>
        <td>张某</td>
        <td>女</td>
        <td>计算机工程学院</td>
        <td>222301</td>
        <td>土木工程</td>
        <td>武则天</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>22230101</td>
        <td>张某</td>
        <td>女</td>
        <td>计算机工程学院</td>
        <td>222301</td>
        <td>土木工程</td>
        <td>武则天</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>22230101</td>
        <td>张某</td>
        <td>女</td>
        <td>计算机工程学院</td>
        <td>222301</td>
        <td>土木工程</td>
        <td>武则天</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>

<script>
        btn = document.getElementById("btn")
        table1 = document.getElementById("table1")
        var otr = document.getElementsByTagName("tr")
        var tbody = document.getElementById("tbody")
       

       function getalltr() {
            for (i = 0; i < otr.length; i++) {

                otr[i].dataset.index = i
            }

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

        tijiao.onclick = function () {

            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 = ""
        }

    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>