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