<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<style>
table{
background:#edf1f2;
}
</style>
<script type="text/javascript">
window.onload = function (){
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var tr=document.getElementsByTagName('tr') ;
for(var i=0;i<tr.length;i++)
{tr[i].onmousemove=function (){
this.style.background='#ff0';
this.onmouseout=function(){
this.style.background='#edf1f2';
}
}
}
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function btn(){
var table=document.getElementById('table');
var r=document.getElementsByTagName('tr').length;
var tr1=document.createElement('tr');
for(var i=0;i<3;i++)
{
var td=document.createElement('td');
if(i==0) {td.innerHTML='xh00'+r;}
else if(i==1){td.innerHTML='name';}
else{
/* var a=document.createElement('a');
a.innerHTML='删除';
a.href="javascript:;";
a.onclick='remove()'
td.appendChild(a)}*/
td.innerHTML="<a href='javascript:;' onclick='remove()' > 删除</a>";}
tr1.appendChild(td);
}
table.appendChild(tr1);
var tr=document.getElementsByTagName('tr') ;
for(var i=0;i<tr.length;i++)
{tr[i].onmousemove=function (){
this.style.background='#ff0';
this.onmouseout=function(){
this.style.background='#edf1f2';
}
}
}
}
// 创建删除函数
function remove(){
var e=event||window.event;
e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode);
}
</script>
</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='remove()' >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick='remove()' >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick='btn()' /> <!--在添加按钮上添加点击事件 -->
</body>
</html>终于自己解决了！
1新添加的行无法移入移出变色，解决方法将移入移出变色的函数复制到添加行函数的最后（或者是将移入移出函数调用一下）；
2新添加的行无法调用删除函数，
//原来的代码
var a=document.createElement('a');
a.innerHTML='删除';
a.href="javascript:;";
a.onclick='remove()';
td.appendChild(a);
//更改后的代码
td.innerHTML="<a href='javascript:;' onclick='remove()' > 删除</a>";
这个虽然解决了，但是我不太懂为什么上边的代码a.onclick='remove';无法执行，新添加的行在开发模式里没有显示onclick的属性。有大神能来解答一下吗
现在就是新添加的行无法调用删除函数了
你这函数有问题吧，onmouseover和onmouseout是分开的