删除函数问题-慕课网

首页课程实战体系课手记专栏慕课教程

删除函数问题

来源：9-22 编程练习

666图

2015-12-19 17:22

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

写回答关注

4回答

Q南极熊Q

2015-12-19 19:35:51

已采纳

还有个tbody节点

0 0
zqbinary

2016-02-05 19:35:48

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

0 0

greenhandc: 2016-01-15 22:57:29

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

1 0

greenh...

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

2016-01-15 22:58:41

共 1 条回复 >