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

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

<!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>

提问者：慕码人0911192 2015-12-19 21:57

个回答

  • 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 标签上直接绑定这个函数就是删除这个节点。 

    0
  • 红尘_0004
    2015-12-22 21:04:28

    楼上已解答，你把remove重新命名就行了

    0