问答详情
源自:9-22 编程练习

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

<!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 00:34

个回答

  • 不知不觉后知后觉嗯
    2017-02-26 14:49:50
    已采纳

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

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


  • 我为王者带盐
    2017-02-26 10:18:19

    buzhidao a