思路:获取选中的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>