点击删除,只能删除新加行。。原先自带的两行怎么删不掉???


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title> new document </title>  

<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   

<script type="text/javascript"> 

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

  function add()

{

var x=document.getElementById("table");

var trs=document.createElement("tr");


var td=document.createElement("td");

td.innerHTML="&nbsp;"

trs.appendChild(td);


var td=document.createElement("td");

td.innerHTML="&nbsp;"

trs.appendChild(td);


var td=document.createElement("td");

td.innerHTML="<p onclick='del(this)'>删除</p>"

trs.appendChild(td);


x.appendChild(trs);   

mouse();

}

// 创建删除函数

function del(obj)

{

var tr=obj.parentNode.parentNode;

var td=document.getElementById("table");

td.removeChild(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><p onclick="del(this)">删除</p></td>   

  </tr>

  <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><p onclick="del(this)">删除</p></td>   

  </tr>  

  </table>

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

</body>

</html>


慕沐7976158
浏览 1228回答 1
1回答

去看天荒地老

你把del(obj)函数td.removeChild(tr);改成 td.tBodies[0].removeChild(tr);就可以删掉了,因为表格默认有tbody标签,改了但添加的不能删,所以还得在add()最后改成var otBodies=x.tBodies[0];otBodies.appendChild(trs);x.appendChild(otBodies);  
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript