制作一个表格，显示班级的学生信息

题目

1. 鼠标移到表格上时背景色改为 #f2f2f2，移开鼠标时则恢复为 #fff
2. 点击添加按钮，能动态在最后添加一行
3. 点击删除按钮，则删除当前行

知识点

table.onmousemove = function(){}; 鼠标移动到"table"元素上执行函数
table.onmouseout = function(){}; 鼠标移出"table"元素后执行函数

table.style.backgroundColor = "#f2f2f2"; 修改CSS样式

var tr = document.createElement("tr"); 创建"tr"元素节点

tr.innerHTML = "" + "" + "";
为 "tr" 添加文本内容

tbody.appendChild(tr); 为父节点"tbody"中添加子节点"tr"

tr.parentNode.removeChild(tr);
tr.parentNode：获取 "tr" 节点的父节点
tr.parentNode.removeChild(tr)：删除父节点中的子节点

难点分析

在 "btn01"响应函数点击之前，"a"标签已经遍历完成，导致新添加的 "a"没有绑定"删除"事件，因此需要重新绑定

btn01.onclick = function(){
    ......
    var a = tr.getElementsByTagName("a");
        a[0].onclick = del;
    ......
};  

"tbody" 为浏览器自动生成，因此需要将新添加的 "tr" 放入 "tbody" 中而不是表格中

var tbody = table.getElementsByTagName("tbody")[0];
    tbody.appendChild(tr);
};

this指向点击的超链接，因此可以通过this.parentNode.parentNode获取到 "tr" 节点
"tr" 的父节点为 "table"，通过removeChild删除父节点的子节点 "tr"

function del(){
        var tr = this.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
    };

代码

    
    
    
    

    
    

        

            
学号
            
姓名
            
操作
        
        

            
001
            
Ryan
            
删除
        
        

            
002
            
Aimer
            
删除
        
    
    添加