动态表格~

ZiminLi

已于 2023-01-18 09:21:47 修改

阅读量361

点赞数

分类专栏： demo 文章标签： css 前端 html

于 2023-01-18 03:45:56 首次发布

本文链接：https://blog.csdn.net/ZiminLi/article/details/128722583

版权

demo 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

此代码示例展示了一个使用HTML、CSS和JavaScript创建的表格，具有交替行颜色、动态添加和删除行的功能。用户可以通过点击添加按钮打开一个表单，输入新学生信息，然后将新行添加到表格中。同样，点击删除按钮会触发确认提示并移除选定行。表格的样式和交互逻辑通过JavaScript进行控制。

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

内容

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

实验原理

添加节点添加新的内容
点击删除按钮删除父节点
重复检查赋值行内颜色

html

<!DOCTYPE html>
<html lang="zh-CN">
<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>demo10</title>
    <link rel="stylesheet" href="./css/demo10.css">
</head>
<body>
    <table>
        <thead>
            <tr>
                <th class="">学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>二级学院</th>
                <th>班级</th>
                <th>专业</th>
                <th>辅导员</th>
                <th><button class="tj">添加</button></th>
                <th>
                    <div class="add">
                    <input type="text" placeholder="学号">
                    <input type="text" placeholder="姓名">
                    <input type="text" placeholder="性别">
                    <input type="text" placeholder="二级学院"><br>
                    <input type="text" placeholder="班级">
                    <input type="text" placeholder="专业">
                    <input type="text" placeholder="辅导员">
                    <button class="sur">确定</button>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>1</td>
                <td>***</td>
                <td>*</td>
                <td>*******</td>
                <td>******</td>
                <td>***********</td>
                <td>***</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>***</td>
                <td>*</td>
                <td>*******</td>
                <td>******</td>
                <td>***********</td>
                <td>***</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td>3</td>
                <td>***</td>
                <td>*</td>
                <td>*******</td>
                <td>******</td>
                <td>***********</td>
                <td>***</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td>4</td>
                <td>***</td>
                <td>*</td>
                <td>*******</td>
                <td>******</td>
                <td>***********</td>
                <td>***</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td>5</td>
                <td>***</td>
                <td>*</td>
                <td>*******</td>
                <td>******</td>
                <td>***********</td>
                <td>***</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td>6</td>
                <td>***</td>
                <td>*</td>
                <td>*******</td>
                <td>******</td>
                <td>***********</td>
                <td>***</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td>7</td>
                <td>***</td>
                <td>*</td>
                <td>*******</td>
                <td>******</td>
                <td>***********</td>
                <td>***</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td>8</td>
                <td>***</td>
                <td>*</td>
                <td>*******</td>
                <td>******</td>
                <td>***********</td>
                <td>***</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td>9</td>
                <td>***</td>
                <td>*</td>
                <td>*******</td>
                <td>******</td>
                <td>***********</td>
                <td>***</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td>10</td>
                <td>***</td>
                <td>*</td>
                <td>*******</td>
                <td>******</td>
                <td>***********</td>
                <td>***</td>
                <td><button class="del">删除</button></td>
            </tr>
        </tbody>
    </table>
    <script src="./js/demo10.js"></script>
</body>
</html>

css

<style>
*{
    margin: 0;
    padding: 0;
}
td{
    text-align: center;
    padding-right: 20px;
    padding-bottom: 10px;
}
th{
    padding-right: 20px;
    padding-bottom: 20px;
}
button{
    width: 50px;
}
.add{
    display: none;
}
</style>

js

<script>
var tb=document.getElementById("tb");
var tr=tb.getElementsByTagName("tr");
var del=document.getElementsByClassName("del");
for(var i=0;i<tr.length;i++){
    tr[i].dataset.index=i+1;
    var idx=tr[i].dataset.index;
    if(idx%2!==0){
        tr[i].style.backgroundColor="black";
        tr[i].style.color="white";
    }
    del[i].onclick=function(){
        this.parentNode.parentNode.remove();
        for(var m=0;m<tr.length;m++){
            tr[m].dataset.index=m+1;
            tr[m].style.backgroundColor="white";
            tr[m].style.color="black";
            var idx2=tr[m].dataset.index;
            if(idx2%2!==0){
                tr[m].style.backgroundColor="black";
                tr[m].style.color="white";
            }
        }
    }
}
var tj=document.getElementsByClassName("tj")[0];
tj.onclick=function(){
    var add=document.getElementsByClassName("add")[0];
    add.style.display="block";
}
var sur=document.getElementsByClassName("sur")[0];
sur.onclick=function(){
    var xh=document.getElementsByTagName("input");
    var newtr=document.createElement("tr");
    newtr.innerHTML=`<td>${xh[0].value}</td><td>${xh[1].value}</td><td>${xh[2].value}</td><td>${xh[3].value}</td><td>${xh[4].value}</td><td>${xh[5].value}</td><td>${xh[6].value}</td><td><button class='del'>删除</button></td>`;
    tb.appendChild(newtr);
    var add=document.getElementsByClassName("add")[0];
    add.style.display="none";
    for(var i=0;i<tr.length;i++){
        tr[i].dataset.index=i+1;
        var idx=tr[i].dataset.index;
        if(idx%2!==0){
            tr[i].style.backgroundColor="black";
            tr[i].style.color="white";
        }
        del[i].onclick=function(){
            this.parentNode.parentNode.remove();
            for(var m=0;m<tr.length;m++){
                tr[m].dataset.index=m+1;
                tr[m].style.backgroundColor="white";
                tr[m].style.color="black";
                var idx2=tr[m].dataset.index;
                if(idx2%2!==0){
                    tr[m].style.backgroundColor="black";
                    tr[m].style.color="white";
                }
            }
        }
    }
}
</script>