为了账号安全,请及时绑定邮箱和手机立即绑定

请问这两句话有什么区别?为什么第一个可以运行,第二个不可以?

第一句:

var del=document.createElement("td");

        del.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>";

第二句:

var del=document.createElement("td");

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

         del.appendChild(tda);

         tda.innerHTML="删除";

         tda.href="javascript:;";

         tda.onclick="remove(this)";


第一句代码可以触发remove函数而第二个不行,为什么???

原题目参考:http://www.imooc.com/code/1636


代码如下:

<!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 tr=document.getElementsByTagName("tr");
          for(var i= 0;i<tr.length;i++)
          {
              bgcChange(tr[i]);
          }
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
      }         
     function bgcChange(obj)
     {
        obj.onmouseover=function(){
            obj.style.backgroundColor="#f2f2f2";
        }
        obj.onmouseout=function(){
            obj.style.backgroundColor="#fff";
        }
}
   
// 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
     var num=2;
     function add(){
        num++;
        var tr=document.createElement("tr");
        var xh=document.createElement("td");
        var xm=document.createElement("td");
        xh.innerHTML="xh00"+num;
        xm.innerHTML="第"+num+"学生";
        var del=document.createElement("td");
        
        //第一种方法(不知道为什么错的方法)
        var tda=document.createElement("a");
         del.appendChild(tda);
         tda.innerHTML="删除";
         tda.href="javascript:;";
         tda.onclick=function(){del(this);};
        //第一种方法(对的)
        /*del.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>"; */
        var tab=document.getElementById("table");
        tab.appendChild(tr);
        tr.appendChild(xh);
        tr.appendChild(xm);
        tr.appendChild(del);
        var tr = document.getElementsByTagName("tr");
          for(var i= 0;i<tr.length;i++)
          {
              bgcChange(tr[i]);
          }
     }
    
     // 创建删除函数
     function del(obj)
     {
         var tr=obj.parentNode.parentNode;
         tr.parentNode.removeChild(tr);
     }
     
 
 
  </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="add()" />   <!--在添加按钮上添加点击事件  -->
 </body>
</html>


正在回答

3 回答

有一个问题为什么两个onclick绑定的函数不一样?remove 或者 del?

 tda.onclick=        这种绑定函数不能这样绑定,下面正确演示:deleteRow函数名

tda.onclick= function(){deleteRow(this);};  //有参数,这里选这种

tda.onclick=deleteRow; //无参数

0 回复 有任何疑惑可以回复我~
#1

Rimas 提问者

函数不一样是因为打错了。 多谢,我先试一下
2016-08-13 回复 有任何疑惑可以回复我~
#2

Rimas 提问者

失败了,我把源代码放在下面的回答里,你看看下,多谢啦
2016-08-13 回复 有任何疑惑可以回复我~
<!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 tr=document.getElementsByTagName("tr");
          for(var i= 0;i<tr.length;i++)
          {
              bgcChange(tr[i]);
          }
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
      }         
     function bgcChange(obj)
     {
        obj.onmouseover=function(){
            obj.style.backgroundColor="#f2f2f2";
        }
        obj.onmouseout=function(){
            obj.style.backgroundColor="#fff";
        }
}
   
// 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
     var num=2;
     function add(){
        num++;
        var tr=document.createElement("tr");
        var xh=document.createElement("td");
        var xm=document.createElement("td");
        xh.innerHTML="xh00"+num;
        xm.innerHTML="第"+num+"学生";
        var del=document.createElement("td");
        
        //第一种方法(不知道为什么错的方法)
        var tda=document.createElement("a");
         del.appendChild(tda);
         tda.innerHTML="删除";
         tda.href="javascript:;";
         tda.onclick=function(){del(this);};
        //第一种方法(对的)
        /*del.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>"; */
        var tab=document.getElementById("table");
        tab.appendChild(tr);
        tr.appendChild(xh);
        tr.appendChild(xm);
        tr.appendChild(del);
        var tr = document.getElementsByTagName("tr");
          for(var i= 0;i<tr.length;i++)
          {
              bgcChange(tr[i]);
          }
     }
    
     // 创建删除函数
     function del(obj)
     {
         var tr=obj.parentNode.parentNode;
         tr.parentNode.removeChild(tr);
     }
     
 
 
  </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="add()" />   <!--在添加按钮上添加点击事件  -->
 </body>
</html>


0 回复 有任何疑惑可以回复我~
#1

Rimas 提问者

这个是源代码
2016-08-13 回复 有任何疑惑可以回复我~
#2

水里有条鱼 回复 Rimas 提问者

我看出来了, var del=document.createElement("td"); 你这个变量名不要跟函数名一样啊,调用函数时,浏览器会判别不了
2016-08-13 回复 有任何疑惑可以回复我~
#3

Rimas 提问者 回复 水里有条鱼

果然是这个原因……虽然我还是不明白,调用的是del()明显是个函数,而另一个是一个node对象,系统怎么会识别错误…… 总之万分感谢!
2016-08-13 回复 有任何疑惑可以回复我~

del.appendChild(tda);并没有把a标签放在<td>里面吧,<a>放在了<td>外面吧

0 回复 有任何疑惑可以回复我~
#1

Rimas 提问者

放进去了呀,我可以看到a标签里 删除 两个字,可以点击,只是不能触发函数
2016-08-13 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

请问这两句话有什么区别?为什么第一个可以运行,第二个不可以?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信