动态表格（JS/HTML/CSS）

需求：

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

原理：

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

效果图：

动态表格

代码：

    
        
            
                
                    
学号
                    
姓名
                    
性别
                    
二级学院
                    
班级
                    
专业
                    
辅导员
                    
操作
                
            
            
        
                    添加            

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删除`        tr.appendChild(td)    }    // 点击按钮删除一行元素    var a=document.querySelectorAll("a")    for(var i=0;inode.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=``            tr.appendChild(td)        }        var td=document.createElement("td")        td.innerHTML=`删除`        tr.appendChild(td)        var a=document.querySelectorAll("a")        for(var i=0;i