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

删除函数问题

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

window.onload = function(){

// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

}

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

// 创建删除函数

function rem(rec)

{

var x = rec.parentNode.parentNode;

var y = document.getElementById("table")

//document.write(y.lastChild.nodename);

y.removeChild(x);

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

删除函数如下：

function rem(rec)

{

var x = rec.parentNode.parentNode;

var y = document.getElementById("table")

//document.write(y.lastChild.nodename);

y.removeChild(x);

}

但是这样删除不了。把函数改成：

function rem(rec)

{

var x = rec.parentNode.parentNode;

var y = document.getElementById("table").lastChild;

//document.write(y.lastChild.nodename);

y.removeChild(x);

}

就可以删除了。这是为什么？要删除的行的父节点不是table吗？

666图

2015-12-19

源自：JavaScript进阶篇 9-22

关注问题我要回答

1072

操作

收起

4 回答

Q南极熊Q 回答被采纳 +3 积分
2015-12-19

还有个tbody节点

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

收起回答

zqbinary
2016-02-05

补充yueyue123同学的：

var tbody = document.getElementById('table').childNodes[1]; //也是可以的：间接证明：在table有两个子节点，第一个是空白节点（#text）,然后是tbody.

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

收起回答

greenhandc
2016-01-15

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
<script type="text/javascript"> 
      
         function rem(rec)
     {
         var x = rec.parentNode.parentNode;
         var y = document.getElementById("table");
         //document.write(y.lastChild.nodename);
         y.removeChild(x);
     }
     
     
      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 = "rem(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>

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

收起回答

greenhandc

我这样写可以啊？？？为什么要加上lastchild

2016-01-15 回复有任何疑惑可以回复我~