动态表格（JS/HTML/CSS）

最新推荐文章于 2025-01-10 01:01:33 发布

aaa小葵

最新推荐文章于 2025-01-10 01:01:33 发布

阅读量2.3k

点赞数 2

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_74033027/article/details/128671725

版权

文章描述了一个使用HTML、CSS和JavaScript实现的动态表格，表格包含学生信息，如学号、姓名等，具有奇偶行颜色交替的效果，以及添加和删除行的功能。点击删除按钮会显示确认提示，添加按钮则弹出表单窗口供用户输入新学生信息。

摘要由CSDN通过智能技术生成

需求：

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

原理：

创建数组保存所有人的信息，利用双层for循环遍历数组及数组内每个对象的属性，再利用节点操作，创建tr/td节点分别封装到tbody和tr内部，利用td/tr。innerHTML向内部填入数组内容

效果图：

动态表格

代码：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
        }
        .box table{ 
            padding: 10px;
            border: 2px solid #ccc;
            background-color: rgb(217, 235, 244);
            text-align: center;
        }
        .box table tr{
            border: 2px solid #ccc;
        }
        .box tbody tr:nth-child(2n){
            background-color: #fff;
            color: #000;
        }
        .box tbody tr:nth-child(2n-1){
            background-color: rgb(33, 31, 31);
            color: #fff;
        }
        .box table td{
            width: 187px;
            height: 70px;
            /* line-height: 10px; */
            padding: 0 5px;
            border-radius: 10px;
        }
        .box table td a{
            cursor: pointer;
        }
        .box button{
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 24px;
            position: absolute;
            left: 1700px;
            top: 0;
            border: none;
            background-color: rgb(235, 155, 155);
            cursor: pointer;
        }
        .box input{
            display: inline-block;
            width: 150px;
            height: 20px;
            border: none;
            text-align: center;
            font-size: 16px;
        }
    </style>

<body>
    <div class="box">
        <table cellspacing="20">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>二级学院</th>
                    <th>班级</th>
                    <th>专业</th>
                    <th>辅导员</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
        <button>
            添加
        </button>
    </div>
</body>

window.onload=function(){
    // 创建数组封装学生信息
    var students=[{
        xuehao:22230304,
        realname:"廖玉洁",
        gender:"女",
        xueyuan:"计算机工程系",
        class:"222303",
        zhuanye:"软件工程",
        teacher:"武则超"    
    },{
        xuehao:22230305,
        realname:"陈乐",
        gender:"男",
        xueyuan:"计算机工程系",
        class:"222303",
        zhuanye:"软件工程",
        teacher:"姜禹锡"    
    },{
        xuehao:22230405,
        realname:"徐阳",
        gender:"女",
        xueyuan:"计算机工程系",
        class:"222304",
        zhuanye:"软件工程",
        teacher:"肖超"    
    },{
        xuehao:22230304,
        realname:"肖懈",
        gender:"女",
        xueyuan:"计算机工程系",
        class:"222303",
        zhuanye:"软件工程",
        teacher:"姜禹锡"    
    },{
        xuehao:22230304,
        realname:"无数",
        gender:"女",
        xueyuan:"计算机工程系",
        class:"222303",
        zhuanye:"软件工程",
        teacher:"姜禹锡"    
    },{
        xuehao:22230304,
        realname:"陈洁",
        gender:"女",
        xueyuan:"计算机工程系",
        class:"222303",
        zhuanye:"软件工程",
        teacher:"姜禹锡"    
    },{
        xuehao:22230304,
        realname:"思恩",
        gender:"女",
        xueyuan:"计算机工程系",
        class:"222303",
        zhuanye:"软件工程",
        teacher:"夏普"    
    },{
        xuehao:22230304,
        realname:"小乐",
        gender:"男",
        xueyuan:"计算机工程系",
        class:"222326",
        zhuanye:"软件工程",
        teacher:"陈诚"    
    },{
        xuehao:22230254,
        realname:"西亚",
        gender:"女",
        xueyuan:"计算机工程系",
        class:"222303",
        zhuanye:"软件工程",
        teacher:"姜禹锡"    
    },{
        xuehao:22232304,
        realname:"文文",
        gender:"男",
        xueyuan:"计算机工程系",
        class:"222305",
        zhuanye:"软件工程",
        teacher:"苏雨"    
    }]
    // 创建行--通过for循环遍历数组，有几个对象就创建几行,再将行插入tbody中
    var tbody=document.querySelector("tbody")
    for(var i=0;i<students.length;i++){
        var tr=document.createElement("tr")
        tbody.appendChild(tr)
        // 创建单元格--for循环遍历数组中的内容，每个对象里有几个属性值就创建几个单元格
        for(var k in students[i]){
            var td=document.createElement("td")
            tr.appendChild(td)
            // 像每个单元格插入对应内容--studens[i][k]
            td.innerHTML=students[i][k]
        }
        var td=document.createElement("td")
        td.innerHTML=`<a herf="#">删除<a>`
        tr.appendChild(td)
    }
    // 点击按钮删除一行元素
    var a=document.querySelectorAll("a")
    for(var i=0;i<a.length;i++){
        a[i].onclick=function(){
            tbody.removeChild(this.parentNode.parentNode)
        }
    }
    // 点击添加按钮可以用户自定义输入内容加入表单
    var btn=document.querySelector("button")
    btn.onclick=function(){
        var tr=document.createElement("tr")
        tbody.appendChild(tr)
        for(var k in students[1]){
            var td=document.createElement("td")
            td.innerHTML=`<input type="text">`
            tr.appendChild(td)
        }
        var td=document.createElement("td")
        td.innerHTML=`<a herf="#">删除<a>`
        tr.appendChild(td)
        var a=document.querySelectorAll("a")
        for(var i=0;i<a.length;i++){
            a[i].onclick=function(){
            tbody.removeChild(this.parentNode.parentNode)
            }
        }
    }
}