怎么让JavaScript删除表格中的行?
发布网友
发布时间：2022-05-03 11:10
共2个回答
热心网友
时间：2022-04-22 16:37
<head>
<title>title</title>
<script type="text/javascript">
function delIndex(obj) {
var rowIndex = obj.parentNode.parentNode.rowIndex;//获得行下标
alert(rowIndex);
var tb = document.getElementById("tb");
tb.deleteRow(rowIndex);//删除当前行
add(rowIndex);//在当前行插入一行
}
function add(rowIndex) {
var tb = document.getElementById("tb");
if (rowIndex == "-1") {
rowIndex = tb.rows.length;//默认在末尾插入一行
}
var row = tb.insertRow(rowIndex);//在表格的指定插入一行
var c1 = row.insertCell(0);
c1.innerHTML = "new" + rowIndex;
var c2 = row.insertCell(1);
c2.innerHTML = '<a href="javascript:void(0)" onclick="delIndex(this)">删除</a>';
}
</script>
</head>
<body>
<input type="button" value="添加一行" onclick="add('-1')" ><input type="button" value="删除选中项" onclick="del()" />
<table id="tb">
<tr><td>1</td><td><a href="javascript:void(0)" onclick="delIndex(this)">删除</a></td></tr>
<tr><td>2</td><td><a href="javascript:void(0)" onclick="delIndex(this)">删除</a></td></tr>
<tr><td>3</td><td><a href="javascript:void(0)" onclick="delIndex(this)">删除</a></td></tr>
<tr><td>4</td><td><a href="javascript:void(0)" onclick="delIndex(this)">删除</a></td></tr>
<tr><td>5</td><td><a href="javascript:void(0)" onclick="delIndex(this)">删除</a></td></tr>
<tr><td>6</td><td><a href="javascript:void(0)" onclick="delIndex(this)">删除</a></td></tr>
<tr><td>7</td><td><a href="javascript:void(0)" onclick="delIndex(this)">删除</a></td></tr>
</table>
</body>
</html>
热心网友
时间：2022-04-22 17:55
int cellIndex = this.parentNode.cellIndex 取得当前cell的序号
this.parentNode.parentNode ->当前行（tr）
this.parentNode.parentNode.children[cellIndex] -> 当前的td
this.parentNode.parentNode.children[cellIndex-1] -> 当前td的左边的td（cellIndex = 0 则不存在）
this.parentNode.parentNode.children[cellIndex+1] -> 当前td的右边的td（cellIndex = this.parentNode.parentNode.children.length 则不存在）
通过 this.parentNode.parentNode.children[cellIndex-1].innerHTML = xxx 即可改变 当前td的左边的td的内容。
通过 this.parentNode.parentNode.children[cellIndex+1].innerHTML = xxx 即可改变 当前td的右边的td的内容。
