为什么点了添加一行之后就没有鼠标经过的效果了-慕课网

为什么点了添加一行之后就没有鼠标经过的效果了

来源：9-22 编程练习

o缘来是你o

2017-02-26 00:34

<!DOCTYPE html>
<html>
<head>
	<title> new document </title>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
	<script type="text/javascript"> 

		window.onload = function(){

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
     var fu_tr = document.getElementById("table").getElementsByTagName("tr");
     for(var i=0; i<fu_tr.length; i++){
     	fu_tr[i].onmouseover = function(){
     		this.style.background = "#cccccc";
     	};
     	fu_tr[i].onmouseout = function(){
     		this.style.background = "#ffffff";
     	};
     }

     

 }

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
      function adda(){
      	var tr = document.createElement("tr");
      	var fu = document.getElementById("table");
      	var fu_tr = document.getElementById("table").getElementsByTagName("tr")[1];
      	
      	tr.innerHTML = fu_tr.innerHTML;
      	console.log(tr);
      	fu.appendChild(tr);
      }


     // 创建删除函数
     function dela(a){
     	//var fu = document.getElementById("table");
     	var aa = a.parentNode.parentNode;
     	aa.parentNode.removeChild(aa);
     }


 </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="dela(this);" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
		</tr>

		<tr>
			<td>xh002</td> 
			<td>刘小芳</td>
			<td><a href="javascript:;" onclick="dela(this);" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
		</tr>  

	</table>
	<input type="button" value="添加一行" onclick="adda();" />   <!--在添加按钮上添加点击事件  -->
</body>
</html>

写回答关注

2回答

不知不觉后知后觉嗯

2017-02-26 14:49:50

已采纳

因为你给添加的<tr>元素没有添加鼠标移入和移除事件，如下：
tr.onmouseover= function(){
              this.style.backgroundColor = "#ccc";
          };
tr.onmouseout= function(){
              this.style.backgroundColor = "#fff";
          };

5 0

o缘来是你o 回复不知不觉后知...

谢谢了！有效果了。

2017-02-27 19:04:04

共 5 条回复 >
我为王者带盐

2017-02-26 10:18:19

buzhidao a

0 0