问答详情
源自: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(){                  

color()


}

      //增加一行

function  add(obj){

var tbody = document.getElementById('table'); 

var tr=document.createElement('tr');

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

td.innerHTML="<input type='text'>";

tr.appendChild(td);

td=document.createElement('td');

td.innerHTML="<input type='text'>";

tr.appendChild(td);

td=document.createElement('td');

td.innerHTML= "<a href='javascript:;' onclick='deleteRow(this)'>删除</a>";

tr.appendChild(td);

tbody.appendChild(tr);

color();

}

//删除行

function deleteRow(obj){

var tbody = document.getElementById('table'); 

var tr=obj.parentNode.parentNode;

tbody.removeChild(tr);

}

 

     

       function color(){

  var trs = document.getElementsByTagName('tr');   

for(var i =1;i<trs.length;i++){

trs[i].onmouseover = function(){

this.style.backgroundColor ="#f2f2f2";

trs[i].onmouseout = function(){

this.style.backgroundColor ="#fff";

}

  }

  </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="deleteRow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:;" onclick="deleteRow(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>  


  </table>

  <input type="button" value="添加一行" onclick="add()"/>   <!--在添加按钮上添加点击事件  -->

 </body>

</html>


提问者:Sinis 2015-06-01 11:18

个回答

  • 伊兮尘昔
    2015-06-01 14:52:30

    var tbody = document.getElementById('table')把你这句话改成

    var tbody = document.getElementById('table').lastChild; 这句话就好了