demo动态表格

最新推荐文章于 2024-05-22 22:57:54 发布

原创最新推荐文章于 2024-05-22 22:57:54 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

文章展示了一个使用HTML、CSS和JavaScript实现的动态表格，表格包含学生信息并支持行的增删。表格行的奇偶颜色交替，点击删除按钮会弹窗确认删除，点击添加按钮可填写新学生信息并添加到表格中。

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

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

原理：
创建一个表格和一个表单，将表单隐藏。点击时弹出表单。通过数组遍历控制颜色的变化。通过appendChild添加元素，内容通过获取表单value值，赋值给要添加的元素

代码：

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            border: 1px solid #999;
            text-align: center;
            margin: 0 auto;
          
        }
        .container tr td{
            width: 100px;
        }
        #add1{
            position: absolute;
            right: 580px;
            top: 10px;
            border: 1px solid aquamarine;
        }
        #form1{
            width: 205px;
            height: 400px;
            position: absolute;
            top: 0;
            right: 900px;
            background:beige ;
            display: none;
        }
        #form1 input{
            margin-top: 20px;
            width: 200px;
        }
    </style>
</head>
<body>
    <table class="container" cellspacing="0" id="table1">
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>二级学院</td>
            <td>班级</td>
            <td>专业</td>
            <td>辅导员</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>22260113</td>
            <td>小明</td>
            <td>男</td>
            <td>计算机学院</td>
            <td>601</td>
            <td>网络工程</td>
            <td>陈正凯</td>
            <td><button id="delete1">删除</button></td>
        </tr>
        <tr>
            <td>22260113</td>
            <td>小明</td>
            <td>男</td>
            <td>计算机学院</td>
            <td>601</td>
            <td>网络工程</td>
            <td>陈正凯</td>
            <td><button id="delete1">删除</button></td>
        </tr>
        <tr>
            <td>22260113</td>
            <td>小明</td>
            <td>男</td>
            <td>计算机学院</td>
            <td>601</td>
            <td>网络工程</td>
            <td>陈正凯</td>
            <td><button id="delete1">删除</button></td>
        </tr>
        <tr>
            <td>22260113</td>
            <td>小明</td>
            <td>男</td>
            <td>计算机学院</td>
            <td>601</td>
            <td>网络工程</td>
            <td>陈正凯</td>
            <td><button id="delete1">删除</button></td>
        </tr>
        <tr>
            <td>22260113</td>
            <td>小明</td>
            <td>男</td>
            <td>计算机学院</td>
            <td>601</td>
            <td>网络工程</td>
            <td>陈正凯</td>
            <td><button id="delete1">删除</button></td>
        </tr>
        <tr>
            <td>22260113</td>
            <td>小明</td>
            <td>男</td>
            <td>计算机学院</td>
            <td>601</td>
            <td>网络工程</td>
            <td>陈正凯</td>
            <td><button id="delete1">删除</button></td>
        </tr>
    </table>
    <button id="add1">添加</button>
    <div id="form1">
        <form action="">
            <input type="text" placeholder="请输入学号" id="numb">
            <input type="text"  placeholder="请输入姓名" id="namer">
            <input type="text"  placeholder="请输入性别" id="gender">
            <input type="text"  placeholder="请输入二级学院" id="school">
            <input type="text"  placeholder="请输入班级" id="class1">
            <input type="text"  placeholder="请输入专业" id="major">
            <input type="text"  placeholder="请输入辅导员" id="pep">
            <input type="button" id="send1" value="提交">
        </form>
    </div>
    <script>
        
        var add1=document.getElementById("add1");
        // var send1=document.getElementById("send1");
        var form1=document.getElementById("form1");
        var table1=document.getElementById("table1")
        //按规律设置颜色背景
        function colori(){
        var alltr=document.querySelectorAll(".container tr");
        for(var i=1;i<alltr.length;i++){
            if(i%2==0){
                alltr[i].style.color='#000'
                alltr[i].style.background='#fff' 
            }else{
                alltr[i].style.color='#fff'
                alltr[i].style.background='#000'
            }
        }
    }
            colori()
            
            //删除行
            var allbutton=document.querySelectorAll(".container tr td button")
            for(var i=0;i<allbutton.length;i++){
                allbutton[i].onclick=function(){
                    if(confirm('确认删除吗')==true){
                        this.parentNode.parentNode.remove()
                        
                    }
                }
            }
            add1.onclick=function(){
                form1.style.display='block'
            }
     
                var numb=document.getElementById("numb")
                var namer=document.getElementById("namer")
                var gender=document.getElementById("gender")
                var school=document.getElementById("school")
                var class1=document.getElementById("class1")
                var major=document.getElementById("major")
                var pep=document.getElementById("pep")

                var tr=document.createElement("tr");
                var button=document.createElement("button");
               
                var numbtd=document.createElement("td"); 
                var namertd=document.createElement("td");
                var gendertd=document.createElement("td");
                var schooltd=document.createElement("td");
                var class1td=document.createElement("td");
                var majortd=document.createElement("td");
                var peptd=document.createElement("td");
           function addit(){        
                

                numbtd.innerHTML=numb.value 
                namertd.innerHTML=namer.value
                gendertd.innerHTML=gender.value
                schooltd.innerHTML=school.value
                class1td.innerHTML=class1.value
                majortd.innerHTML=major.value
                peptd.innerHTML=pep.value
                button.innerHTML="删除";

                table1.appendChild(tr);
                tr.appendChild(numbtd)
                tr.appendChild(namertd)
                tr.appendChild(gendertd)
                tr.appendChild(schooltd)
                tr.appendChild(class1td)
                tr.appendChild(majortd)
                tr.appendChild(peptd)
                tr.appendChild(button)
          }
          send1.onclick=function(){
            form1.style.display='none'
            addit()
            colori()
            button.onclick=function(){
                if(confirm('确认删除吗')==true){
                        this.parentNode.remove()
                        
                    }
            }
          }
    </script>
</body>
</html>

效果演示：

动态表格