javascript 如何一次删除table的多个tr?

JavaScript019

javascript 如何一次删除table的多个tr?,第1张

思路:获取选中的checkbox对象→利用parentNode获取父节点直到获取到所在行→循环删除。实例演示如下:

1、HTML结构

<table id = "test">

<tr><td><input type="checkbox" name="test"></td><td>1</td><td>2</td><td>3</td></tr>

<tr><td><input type="checkbox" name="test"></td><td>4</td><td>5</td><td>6</td></tr>

<tr><td><input type="checkbox" name="test"></td><td>7</td><td>8</td><td>9</td></tr>

<tr><td><input type="checkbox" name="test"></td><td>10</td><td>11</td><td>12</td></tr>

</table>

<input type="button" value="删除" onclick="fun()">

2、javascript代码

function fun(){

var boxes = document.getElementsByName("test")

for(i=0i<boxes.lengthi++){

if(boxes[i].checked){

tr = boxes[i].parentNode.parentNode

tr.parentNode.removeChild(tr)

}

}

}

3、效果演示

<input id="Button1" type="button" value="删除" onclick="del()" />

function del() {

var tab=document.getElemntsByTagName("table")[0]//最好给table指定个id

for(var i=0i<tab.rows.lengthi++) {

for(var j=0j<tab.rows[i].cells.lengthj++) [

var obj=tab.rows[i][j].getElementsByTagName("input")[0]

if(obj!=null &&obj.type="checkbox" &&obj.checked=true) {//你没说需求我就直接将第一行中有checkbox且为true的删除

var tr=obj.parentNode.parentNode

tr.parentNode.removeChild(tr)

}

}

}

}

<table width="100%" id="tab">

<tr id="tr_1">

<td>行1</td>

<td><a href="#this" onclick="remove_tr(1)">点击移除</a></td>

</tr>

<tr id="tr_2">

<td>行2</td>

<td><a href="#this" onclick="remove_tr(2)">点击移除</a></td>

</tr>

<tr id="tr_3">

<td>行3</td>

<td><a href="#this" onclick="remove_tr(3)">点击移除</a></td>

</tr>

<tr id="tr_4">

<td>行4</td>

<td><a href="#this" onclick="remove_tr(4)">点击移除</a></td>

</tr>

</table>

<script type="text/javascript">

<!--

function remove_tr(index){

var tr = document.getElementById('tr_'+index)

tr.parentNode.removeChild(tr)

}

//-->

</script>