只写了添加，删除。。。。。删除哪儿错了，帮看下，非常谢谢啦！！！-慕课网

只写了添加，删除。。。。。删除哪儿错了，帮看下，非常谢谢啦！！！

来源：9-22 编程练习

慕码人0911192

2015-12-19 21:57

<!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(){
        function remove(obj){
          var tr = obj.parentNode.parentNode;
          tr.parentNode.removeChild(tr);
       }
   }

      var num = 2;
      function add(){
      var input = document.getElementsByTagName("input")[0];
      var tab = document.getElementById("table");
      var tr = document.createElement("tr");
      var td1 = document.createElement("td");
      var td2 = document.createElement("td");
      var td3 = document.createElement("td");
            num++;
           td1.innerHTML = "xh00"+ num;
           td2.innerHTML = num+"个同学";
           td3.innerHTML = '<a href="javascript:;" onclick = "remove(this)">删除</a>' ;
           tr.appendChild(td1);
           tr.appendChild(td2);
           tr.appendChild(td3);
           tab.appendChild(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 = "remove(this)">删除</a></td>   
       </tr>

       <tr>
       <td>xh002</td>
       <td>刘小芳</td>
       <td><a href="javascript:;" onclick = "remove(this)">删除</a></td>   
       </tr>

       </table>
       <input type="button" value="添加一行" onclick="add()"/>   
</body>
</html>

写回答关注

2回答

LLeo小浩: 2015-12-19 22:13:20

已采纳

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
 </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="#" onclick = "remove_(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>

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

       </table>
       <input type="button" value="添加一行" onclick="add()"/>   <!--在添加按钮上添加点击事件  -->
       <script type="text/javascript"> 
        var num = 2;
        function add(){
          var input = document.getElementsByTagName("input")[0], 
              tab = document.getElementById("table"),
              tr = document.createElement("tr"),
              td1 = document.createElement("td"),
              td2 = document.createElement("td"),
              td3 = document.createElement("td");
          num++;
          td1.innerHTML = "xh00"+ num;
          td2.innerHTML = num+"个同学";
          td3.innerHTML = '<a href="javascript:;" onclick = "remove(this)">删除</a>' ;
          tr.appendChild(td1);
          tr.appendChild(td2);
          tr.appendChild(td3); 
          tab.appendChild(tr);  
        }

        function remove_(obj){
          var tr = obj.parentNode.parentNode;
          tr.parentNode.removeChild(tr); 
        }
        </script>
 </body>
</html>

原因是 remove 是一个DOM 原生的函数名，作用是删除元素节点。你在 a 标签上直接绑定这个函数就是删除这个节点。

3 0

really...

td3.innerHTML = '<a href="javascript:;" onclick = "remove(this)">删除</a>' ; 请问这里的单引号和双引号有特别需要注意的地方吗？我试过了，如果都用双引号是没办法运行的，不是说双引号和单引号都没什么区别吗？谢谢！

2016-01-19 20:52:07

共 3 条回复 >