                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

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

<!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>

o缘来是你o

2017-02-26

源自：JavaScript进阶篇 9-22

关注问题我要回答

1021

操作

收起

2 回答

不知不觉后知后觉嗯回答被采纳 +3 积分
2017-02-26

因为你给添加的<tr>元素没有添加鼠标移入和移除事件，如下：

tr.onmouseover= function(){
              this.style.backgroundColor = "#ccc";
          };
tr.onmouseout= function(){
              this.style.backgroundColor = "#fff";
          };