动态表格（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;i`
            tr.appendChild(td)
        }
        var td=document.createElement("td")
        td.innerHTML=`删除`
        tr.appendChild(td)
        var a=document.querySelectorAll("a")
        for(var i=0;i