这篇博客展示了如何利用JavaScript实现HTML表格的动态操作，包括添加和删除行。通过点击按钮，用户可以向表格中插入新的行，每行包含三个输入框和一个删除按钮。删除按钮的点击事件触发removeRow函数，该函数根据事件源删除相应的表格行。
<html>
<head>
<title>Adding and Removing Rows from a table using DHTML and JavaScript</title>
<script language="javascript">
function addRow()
{
var newRow = document.all("tblGrid").insertRow();
//得到表的对象并插入一行，下面是插入了行以后，填充相应的列节点，如下面所示
var oCell = newRow.insertCell();//插入列的节点
oCell.innerHTML = "<input type='text' name='t1'>";//列里面填充的值，innerHtml值列内的所有元素
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t2'>";
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t3'> <input type='button' value='Delete' οnclick='removeRow(this);'/>";
}
function removeRow(src)
{
var oRow = src.parentElement.parentElement; //获取当前事件的父节点
document.all("tblGrid").deleteRow(oRow.rowIndex); //删除当前列
}
</script>
</head>
<body>
<table id="tblGrid" style="table-layout:fixed">
<tr>
<td width="150px">Field1</td>
<td width="150px">Field2</td>
<td width="250px">Field3</td>
</tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="text" name="t2" /></td>
<td><input type="text" name="t3" /> <input type="button" value="Delete" onClick="removeRow(this);" /></td>
</tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="text" name="t2" /></td>
<td><input type="text" name="t3" /> <input type="button" value="Delete" onClick="removeRow(this);" /></td>
</tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="text" name="t2" /></td>
<td><input type="text" name="t3" /> <input type="button" value="Delete" onClick="removeRow(this);" /></td>
</tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="text" name="t2" /></td>
<td><input type="text" name="t3" /> <input type="button" value="Delete" onClick="removeRow(this);" /></td>
</tr>
</table>
<hr>
<input type="button" value="Add Row" onClick="addRow();" />
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
