请大神帮忙修改下这个js
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="shan(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="shan(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" id="dj"/> <!--在添加按钮上添加点击事件 -->
<script type="text/javascript">
var table = document.getElementById("table");
var tr=document.getElementsByTagName("tr");
var dj = document.getElementById("dj");
//鼠标移入变色和移出清除变色
for (var i=1;i<tr.length;i++)
{
tr[i].onmouseover = function(){
this.style.background = "#f2f2f2";
}
tr[i].onmouseout = function(){
this.style.background = "";
}
}
//点击添加tr
dj.onclick = function(){
var cjtr = document.createElement("tr");
var cjtd1 = document.createElement("td");
var cjtd2 = document.createElement("td");
var cjtd3 = document.createElement("td");
var cjwb1 = document.createTextNode("xh003");
var cjwb2 = document.createTextNode("何三三");
cjtd3.innerHTML = '<a href="javascript:;" onclick="shan(this)">删除</a>';
cjtd1.appendChild(cjwb1);
cjtd2.appendChild(cjwb2);
cjtr.appendChild(cjtd1);
cjtr.appendChild(cjtd2);
cjtr.appendChild(cjtd3);
table.appendChild(cjtr);
}
//点击删除
function shan(c){
var sc = c.parentNode.parentNode;
sc.parentNode.removeChild(sc);
}
</script>
</body>
</html>
上面代码中:
点击添加一行可以正常多出一行tr,但是鼠标移入却没有变色效果了,麻烦大神帮忙修改下 就这个问题