关于表格中删除,添加节点以及鼠标响应的问题

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript"> 
  
      window.onload = function(){
                  
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
        var trobj=document.getElementsByTagName("tr");
        for (var i=0;i<trobj.length;i++){
            trobj[i].onmouseover=function(){
                this.style.backgroundColor="#f2f2f2";
            }
            trobj[i].onmouseout=function(){
                //this.removeAttribute("style");
                this.style.backgroundColor="#fff";
            }
        }
	 }
     
      // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
     function addstu(){
        var newnode=document.createElement("tr"); 
        var newnode1=document.createElement("td"); 
        var newnode2=document.createElement("td"); 
        var newnode3=document.createElement("td"); 
        var tablenode=document.getElementById("table");
        newnode1.innerHTML="xh003";
        newnode2.innerHTML="小红";
        newnode3.innerHTML="<a href="javascript:;" onclick="remove(this)" >删除</a>";
        tablenode.appendChild(newnode);
        newnode.appendChild(newnode1);
        newnode.appendChild(newnode2);
        newnode.appendChild(newnode3);   
     }
    
     // 创建删除函数
     function del(obj){
         var delnode=obj.parentNode.parentNode;
         delnode.parentNode.removeChild(delnode);
         
     }

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

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

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

总共三个事件(添加行,删除行,鼠标移动响应),点击后都没有反应,对照其他同学的代码也进行了一些改正还是没有解决,求教怎么解决?

慕哥0008349
浏览 1186回答 1
1回答

stone310

双引号不能重合使用newnode3.innerHTML="<a href='javascript:;'  onclick='del(this)' >删除</a>";上面那句里面代码改成了单引号,函数名改成del
打开App,查看更多内容
随时随地看视频慕课网APP