JavaScript 设置动态表格

O_oregou

已于 2024-07-07 08:40:02 修改

阅读量1.1k

点赞数

文章标签： javascript 前端 css

于 2023-01-11 21:15:42 首次发布

本文链接：https://blog.csdn.net/O_osange/article/details/128649149

版权

文章展示了一个使用HTML、CSS和JavaScript实现的动态表格，表格包含学生信息，支持行的增删操作。用户可以通过点击添加按钮弹出表单添加新行，点击删除按钮会触发确认对话框，确保用户想要删除选定行。表格行的奇偶行颜色交替，提供良好的视觉效果。

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

效果要求：

1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓名、性别、二级学院、班级、专业、辅导员；

2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底色为黑色；

3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变：

4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。

实现原理：

通过 document.getElementById 获取id相同的标签

利用遍历为每一个 a 绑定单击响应函数

在这个 a 的单机响应函数中利用了 this.parentNode.parentNode 的方式获取了当前 a 标签的tr标签，还使用了弹窗 confirm 来确认用户是否需要删除

在设置响应函数中，this的指向就是设置响应函数的那个元素

其中在提交按钮的单击响应函数中，设置了 if((xh||name||xb||xy||bj||zy||fdy) == "") 判断，如果用户没有输入完整的学员信息则不添加新的表格行

在提交按钮的单击响应函数中通过 tr.innerHTML 的方式向tr标签中加入html代码

代码展示：

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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="put">
        <table border="2" cellspacing="3" id="table">
            <tbody>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>二级学院</th>
                    <th>班级</th>
                    <th>专业</th>
                    <th>辅导员</th>
                    <th class="del"></th>
                </tr>
                <tr class="tr">
                    <td>01</td>
                    <td>一号</td>
                    <td>男</td>
                    <td>计算机工程学院</td>
                    <td>计嵌二班</td>
                    <td>计算机科学与技术</td>
                    <td>一号辅导员</td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr class="tr">
                    <td>02</td>
                    <td>二号</td>
                    <td>男</td>
                    <td>计算机工程学院</td>
                    <td>计嵌一班</td>
                    <td>计算机科学与技术</td>
                    <td>二号辅导员</td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr class="tr">
                    <td>03</td>
                    <td>三号</td>
                    <td>女</td>
                    <td>计算机工程学院</td>
                    <td>计嵌三班</td>
                    <td>计算机科学与技术</td>
                    <td>三号辅导员</td>
                    <td><a href="#">Delete</a></td>
                </tr>
            </tbody>
            <button id="tianjia">添加学员信息</button>
        </table>
    </div>


    <div id="big">
        <form action=""  id="get">
            <div>
                <p>学号:</p><input type="text" id="xh">
            </div>
            <div>
                <p>姓名:</p><input type="text" id="name">
            </div>
            <div>
                <p>性别:</p><input type="text" id="xb">
            </div>
            <div>
                <p>二级学院:</p><input type="text" id="xy">
            </div>
            <div>
                <p>班级:</p><input type="text" id="bj">
            </div>
            <div>
                <p>专业:</p><input type="text" id="zy">
            </div>
            <div>
                <p>辅导员:</p><input type="text" id="fdy">
            </div>
        </form>
        <button id="qx">取消添加</button>
        <button id="tj">提交</button>
    </div>



    <script src="./index.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;

}

#put{
    width: 600px;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
}

#table{
    width: 600px;
    margin: 0 auto;
    text-align: center;
    line-height: 25px;

}

#table .del{
    width: 52px;
}

tr{
    height: 25px;
}

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

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

#tianjia{   
    position: absolute;
    right: -90px;
    top: 0px;
}


#get{
    display: block;
    width: 400px;
    margin: 0 auto;
    padding:8px 10px;
    padding-bottom: 50px;
    border: 3px solid wheat;
    border-radius: 5px;

    position: relative;
}

p{
    display: inline-block;
    width: 100px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    color: black;
}

#get div{
    margin-top: 2px;
}

input{
    width: 280px;
    outline: none;
}

button{
    cursor: pointer;
}

#big{
    position: absolute;
    top: 50px;
    right: 20px;
    width: 430px;
    height: 260px;
    margin: 0 auto;

    display: none;
}

#qx{
    position: absolute;
    bottom:25px;
    left: 40px;

    height: 25px;
    text-align: center;
    line-height: 25px;
    border: 1px solid gray;
    outline: none;
    cursor: pointer;
    margin-top: 10px;
}
#tj{
    position: absolute;
    bottom: 25px;
    right: 40px;

    height: 25px;
    text-align: center;
    line-height: 25px;
    border: 1px solid gray;
    outline: none;
    cursor: pointer;
    margin-top: 10px;
}

js

function delA(){
    // 获取当前a标签所在的tr标签
    var tr = this.parentNode.parentNode

    // 获取当前tr的学员的name
    var name = tr.children[1].innerHTML

    //弹出确认或取消的框框
    var decide = confirm("请确认是否删除"+name+"学员的信息")

    //判断是否删除
    if(decide){
        tr.parentNode.removeChild(tr)
    }
}

window.onload = function(){
    var tianjia = document.getElementById("tianjia")
    var big = document.getElementById("big")

    tianjia.onclick = function(){
        big.style.display = "block"
    }

    var qx = document.getElementById("qx")
    qx.onclick = function(){
        big.style.display = "none"
    }

    // 获取所有的a标签
    var allA = document.querySelectorAll(".tr a")

    // 为每一个a标签绑定单机响应函数
    for(var i = 0;i<allA.length;i++){
        allA[i].onclick = delA
    }

    // 获取添加学员信息按钮
    var tj = document.getElementById("tj")

    // 为添加学员信息按钮绑定单机响应函数
    tj.onclick = function(){
        // 获取每一个表单
        var xh = document.getElementById("xh").value
        var name = document.getElementById("name").value
        var xb = document.getElementById("xb").value
        var xy = document.getElementById("xy").value
        var bj = document.getElementById("bj").value
        var zy = document.getElementById("zy").value
        var fdy = document.getElementById("fdy").value

        if((xh||name||xb||xy||bj||zy||fdy) == ""){
            alert("请输入完整的学员信息")
            return
        }

        //创建一个tr标签
        var tr = document.createElement("tr")

        //为tr标签添加内容
        tr.innerHTML = 
        "<td>"+xh+"</td>"+
        "<td>"+name+"</td>"+
        "<td>"+xb+"</td>"+
        "<td>"+xy+"</td>"+
        "<td>"+bj+"</td>"+
        "<td>"+zy+"</td>"+
        "<td>"+fdy+"</td>"+
        "<td><a href='#'>Delete</a></td>"

        // 获取tr标签中的a标签
        a = tr.getElementsByTagName("a")[0];

        // 为新建的a标签绑定单机响应函数
        a.onclick = delA

        //获取table
        var table = document.getElementById("table");
        //获取table里面的tbody
        var tbody = table.getElementsByTagName("tbody")[0];
        //将tr添加到tbody中
        tbody.appendChild(tr);


    }
}