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

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

第一句：

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>


提问者：Rimas 2016-08-13 11:34

个回答

  • 水里有条鱼
    2016-08-13 12:06:18
    已采纳

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

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

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

    tda.onclick=deleteRow; //无参数

    0
  • Rimas
    2016-08-13 12:20:38

    <!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
  • 小飞象_haha
    2016-08-13 12:03:17

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

    0