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

思路：获取选中的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、效果演示

<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>

jquery删除指定的tr可以参考以下的方法：

1、在button 的onclick事件中直接将this传过去：removeColunm(this)

2、在事件中，this.parent():代表获取到td ，this.parent().parent():代表获取到tr。

function removeColumn(thisbutton){

$(thisbutton).parent().parent().remove()

}

扩展资料：

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在jQuery 语法章节中已经提到过。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个 <p>元素上触发时，隐藏当前的 <p>元素：

$("p").click(function(){

$(this).hide()})

dblclick()

当双击元素时，会发生 dblclick 事件。

参考资料来源：百度百科-jQuery

---