<html>
<head>
<script type="text/javascript">
function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex
document.getElementById('myTable').deleteRow(i)
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row 1</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>Row 2</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>Row 3</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
</table>
</body>
</html>
|
如果想要删除某个新添加的文本框，那么又该怎么做呢？
想法是这样的：
在新添加的文本框后，添加一个超级链接“-”，将点击时触发自定义函数deleteRow(this)，将当前被点击的对象传入。
function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex
document.getElementById('myTable').deleteRow(i)
}
自定义方法在接收到被点击的对象之后，并不能自己删除自己，因为这个deleteRow()方法是对表格元素进行的操作，而不是行。
通过：当前对象.parentNode.parentNode.rowIndex取得了当前行的索引。
解释：当前对象为元素，当前对象.parentNode为
元素，当前对象.parentNode.parentNode为元素。在获得了希望删除的建造的索引之后，最后再通过DOM获得整个表格元素，然后调用这个表格元素的deleteRow(i)，将刚刚得到的那个索引为i的行删除。
| 