为什么新建的无法删除操作-慕课网

首页课程实战体系课手记专栏慕课教程

为什么新建的无法删除操作

来源：9-22 编程练习

HoooooHooo

2016-04-22 14:40

var a=document.createElement("a");

a.innerHTML="删除";

a.href="javascript:;";

a.onClick="del(this)";

写回答关注

3回答

kuban

2016-04-25 11:07:53

已采纳
我跟你同一天遇到的这个问题，时间上比你早一点点，然后一个问题玩到了现在o(╯□╰)o，好了，说重点
a.onClick="del(this)";这一行无效，无效原因下面说，我先说几种有效的写法：
1. a.onclick=function(){del(this);}
2. a.onclick=function(){del(a);}
3. a.onclick=function(){var deltr=this.parentNode.parentNode;deltr.parentNode.removeChild(deltr)};
  然后说说无效这回事
  首先，假如del是个不带参的函数，那么a.onclick=del;这种写法有效，带参就是上面那种带function的
  然后，上边四种写法都是a.onclick=方法名，就是将方法赋值给a的onclick事件，达到绑定事件作用，所以a.onClick="del(this)"至少应该写成a.onClick=del(this)
  但是可惜的是a.onClick=del(this)也是错的，这句话并不具有绑定事件作用，而是直接调用del(this)，这不是我们要的
  不过还有更可惜的，就是哪怕没绑到onclick上，del(this)也没有执行，这是因为this指向调用者，没有调用者时指向window,于是this.parentNode什么的undefined了，无法执行。换成del(a)则至少可以执行了。
  最后说说a.onclick=del()与a.onclick=del
  带括号的是执行函数，返回值赋给onclick，结果就是，越过onclick先执行了；不带括号的是将函数绑定到onclick上，需要的时候再执行。
  如有错误，望指正。
3 0

kuban 回复Hooooo...

我代码自己尝试的东西还有注释掉的多，看着不大具有可读性，刨去注释掉的跟他们的大同小异

2016-04-26 13:20:48

共 3 条回复 >

HoooooHooo: 2016-04-26 13:46:36

<!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 trs=document.getElementsByTagName("tr");
          for(var i=0;i<trs.length;i++){
              
              
                trs[i].onmouseover=function color1(){this.style.backgroundColor="#f2f2f2";}
                trs[i].onmouseout=function color2(){this.style.backgroundColor="#fff";}
          }
              
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

	 }
    
     
     
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     function addto(obj){
         var no=prompt("Your No.:");
         var name=prompt("Your Name:");
         
         var table=document.getElementById("table").lastChild;
         
         var tr=document.createElement("tr");
         
         var td1=document.createElement("td");
         td1.innerHTML=no;
         
         var td2=document.createElement("td");
         td2.innerHTML=name;
         
         var td3=document.createElement("td");
         //td3.innerHTML="<a href="#"> 删除 </a>"; 
         //td3.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>";
         
         
         var a=document.createElement("a");
         //a.innerHTML="<a href="javascript:;" onClick="del(this)">删除</a>";
         a.innerHTML="<a>删除</a>"
         a.href="javascript:;";
         a.onClick=function(){del(this);};
         
         td3.appendChild(a);
         
         tr.appendChild(td1);
         tr.appendChild(td2);
         tr.appendChild(td3);
         table.appendChild(tr);
         
         
         
         
         
         
          var trs=document.getElementsByTagName("tr");
          for(var i=0;i<trs.length;i++){
              
              
                trs[i].onmouseover=function color1(){this.style.backgroundColor="#f2f2f2";}
                trs[i].onmouseout=function color2(){this.style.backgroundColor="#fff";}
          }
              
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

         
         
     }
     
     
     
     
    		
   	 
     // 创建删除函数
     function del(obj){
         var del1=obj.parentNode.parentNode.parentNode;
         var del2=obj.parentNode.parentNode;
         del1.removeChild(del2);
     }


  </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="addto(this)"  />   <!--在添加按钮上添加点击事件  -->
 </body>
</html>

好像还是不行额

1 0

慕粉3219...

var a=document.createElement("a"); //a.innerHTML="<a href="javascript:;" onClick="del(this)">删除</a>"; a.innerHTML="<a>删除</a>" a.href="javascript:;"; a.onClick=function(){del(this);}; 貌似你的a.onClick=function(){del(this);};onclick的c大写了

2016-04-28 11:29:33

共 1 条回复 >