效果圖：

任務：

1. 滑鼠移到不同行上時背景色改為色值為 #f2f2f2，移開滑鼠時則恢復為原背景色 #fff

var tr=document.getElementsByTagName("tr");
for(var i= 0;i<tr.length;i++)
{
bgcChange(tr[i]);
}
// 滑鼠移動改變背景,可以通過給每行綁定滑鼠移上事件和滑鼠移除事件來改變所在行背景色。
function bgcChange(obj)
{
obj.onmouseover=function(){
obj.style.backgroundColor="#f2f2f2";
}
obj.onmouseout=function(){
obj.style.backgroundColor="#fff";
}
}

2. 點擊添加按鈕，能動態在最後添加一行

var num=2;
function add(){
num++;
var tr=document.createElement("tr");
var xh=document.createElement("td");
var xm=document.createElement("td");
xh.innerHTML="xh00"+num;
xm.innerHTML="第"+num+"位學生";
var del=document.createElement("td");
del.innerHTML="<a href='javascript:;' onclick='del(this)' >刪除</a>";
var tab=document.getElementById("table");
tab.appendChild(tr);
tr.appendChild(xh);
tr.appendChild(xm);
tr.appendChild(del);
var tr = document.getElementsByTagName("tr");
for(var i= 0;i<tr.length;i++)
{
bgcChange(tr[i]);
}
}

3. 點擊刪除按鈕，則刪除當前行

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