                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

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

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

源自：JavaScript进阶篇 9-22

关注问题我要回答

582

操作

收起

2 回答

LLeo小浩回答被采纳 +3 积分
2015-12-19

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