JavaScript删除table表格指定行

快乐打工仔 分类:实例代码

在实际应用中,可能要删除指定表格的指定行,下面介绍一下如何实现此效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script>
function deleteRow(r){
  var i=r.parentNode.parentNode.rowIndex;
  document.getElementById('myTable').deleteRow(i);
}
window.onload=function(){
  var bts=document.getElementsByTagName("input");
  for(var index=0;index<bts.length;index++){
    bts[index].onclick=function(){
      deleteRow(this);
    }
  }
}
</script>
</head>
<body>
<table id="myTable" border="1">
  <tr>  
    <td>犀牛前端部落一</td>
    <td><input type="button" value="删除行"/></td>
  </tr>
  <tr>  
    <td>犀牛前端部落二</td>
    <td><input type="button" value="删除行"/></td>
  </tr>
  <tr>  
    <td>犀牛前端部落三</td>
    <td><input type="button" value="删除行"/></td>
  </tr>
</table>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).function deleteRow(r){},此函数能够删除指定的行,r参数是按钮对象。

(2).var i=r.parentNode.parentNode.rowIndex,r.parentNode可以获取td对象,r.parentNode.parentNode可以获取tr对象,rowIndex获取的是tr行的索引值。

(3).document.getElementById('myTable').deleteRow(i),删除指定索引的行。

(4).var bts=document.getElementsByTagName("input"),获取input元素集合,当然这里就是按钮对象集合。

(5).for(var index=0;index<bts.length;index++){

  bts[index].onclick=function(){

    deleteRow(this);

  }

},批量为按钮注册事件处理函数。

二.相关阅读:

(1).parentNode属性参阅JavaScript parentNode一章节。

(2).rowIndex属性参阅JavaScript rowIndex一章节。

(3).deleteRow()方法参阅JavaScript deleteRow()一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容