实现动态表格

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

<!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>
</head>
	<style>
	*{
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }
    #add{
        display: block;
        position: absolute;
        top: 50px;
        right: 50px;
        width: 50px;
        height: 40px;
        font-size: 20px;
        line-height: 30px;
        background-color: #1F92CB;
        color: rgb(236, 236, 87);
        border: 0;
    }
    #table{
        width: 1000px;
        margin: 100px auto;
        border: 1px solid rgb(157, 157, 157);
    }
    #table a{
        color: rgb(255, 0, 0);
    }
    #table tr{
        text-align: center;
    }
    #table tr th{
        border: 1px solid rgb(157, 157, 157);
    }
    #table tr:nth-child(2n){
        color: rgb(22, 22, 22); 
        background-color: rgb(236, 236, 87);
    }
    #table tr:nth-child(2n+1){
        color: rgb(22, 22, 22); 
        background-color: #1F92CB;
    }
    #table2{
        width: 400px;
        height: 350px;
        border: 1px solid rgb(157, 157, 157);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 100px auto;
        background-color: rgb(241, 241, 241);
    }
    #table2 tr input{
        right:0;
    }
    #table2 button{
        margin-top: 20px;
    }
    #box{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: rgb(250, 235, 215,0.5);
    }
	</style>
</head>
<body>
    <button id="add">添加</button>
    <table id="table">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>二级学院</th>
            <th>班级</th>
            <th>专业</th>
            <th>辅导员</th>
            <th>是否删除</th>
        </tr>
        <tr>
            <td>202301</td>
            <td>刘一</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>01</td>
            <td>计算机科学与技术</td>
            <td>刘老师</td>
            <td class="td"><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>202302</td>
            <td>陈二</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>01</td>
            <td>计算机科学与技术</td>
            <td>刘老师</td>
            <td class="td"><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>202303</td>
            <td>张三</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>01</td>
            <td>计算机科学与技术</td>
            <td>刘老师</td>
            <td class="td"><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>202304</td>
            <td>李四</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>01</td>
            <td>计算机科学与技术</td>
            <td>刘老师</td>
            <td class="td"><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>202305</td>
            <td>王五</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>01</td>
            <td>计算机科学与技术</td>
            <td>刘老师</td>
            <td class="td"><a href="#">删除</a></td>
        </tr>
    </table>
    <div id="box">
        <table id="table2">
            <tr>
                <td>学号:<input type="text" id="id"></td>
            </tr>
            <tr>
                <td>姓名:<input type="text" id="name"></td>
            </tr>
            <tr>
                <td>性别:<input type="text" id="sex"></td>
            </tr>
            <tr>
                <td>二级学院:<input type="text" id="school2"></td>
            </tr>
            <tr>
                <td>班级:<input type="text" id="classroom"></td>
            </tr>
            <tr>
                <td>专业:<input type="text" id="profess"></td>
            </tr>
            <tr>
                <td>辅导员:<input type="text" id="teacher"></td>
            </tr>
            <tr>
                <td><button id="up">提交</button></td>
                <td><button id="over">退出</button></td>
            </tr>
        </table>
    </div>
    <script>
        function deleta(){
            var tr = this.parentNode.parentNode
            var decide = confirm("是否删除?")// 显示提示
            if(decide){
                tr.parentNode.removeChild(tr)
            }
        }
        window.onload=function(){
            var add = document.getElementById("add")
            var link = document.querySelectorAll(".td a")
            var up = document.getElementById("up")
            
            for(var i=0;i<link.length;i++){// 为每一个a标签绑定一个响应函数
                link[i].onclick=deleta
            }
            var box = document.getElementById("box")
            var over = document.getElementById("over")

            up.onclick=function(){
            var id = document.getElementById("id").value
            var name = document.getElementById("name").value
            var sex = document.getElementById("sex").value
            var school2 = document.getElementById("school2").value
            var classroom = document.getElementById("classroom").value
            var profess = document.getElementById("profess").value
            var teacher = document.getElementById("teacher").value
            var tr = document.createElement("tr") //创建一个tr标签
            tr.innerHTML="<td>"+id+"</td>"+
                        "<td>"+name+"</td>"+
                        "<td>"+sex+"</td>"+
                        "<td>"+school2+"</td>"+
                        "<td>"+classroom+"</td>"+
                        "<td>"+profess+"</td>"+
                        "<td>"+teacher+"</td>"+
                        "<td class='td'><a href='#'>删除</a></td>" //添加tr标签以及其子标签
                var a = tr.getElementsByTagName("a")[0] // 获取tr标签中的a标签
                a.onclick = deleta; // a标签绑定响应函数
                
                var table = document.getElementById("table")
                var tbody=table.getElementsByTagName("tbody")[0];
                tbody.appendChild(tr)
            }
            add.onclick=function(){
                box.style.display="flex"
            }
            over.onclick=function(){
                box.style.display="none"
            }
            
        }
    </script>
</body>
</html>

效果