<html>
<head>
<title>js增加td，tr</title>
<script language="javascript">
//add a new row to the table
function addRow()
{
//add a row to the rows collection and get a reference to the newly added row
var newRow = document.all("tblGrid").insertRow();
//add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes
var oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t1'>";
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);'/>";
}
//deletes the specified row from the table
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var oRow = src.parentElement.parentElement;
//once the row reference is obtained, delete it passing in its rowIndex
document.all("tblGrid").deleteRow(oRow.rowIndex);
}
</script>
</head>
<body>
<!-- sample table grid with 3 columns and 4 rows that are presented by default -->
<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();" />
<hr>
</body>
</html>
<head>
<title>js增加td，tr</title>
<script language="javascript">
//add a new row to the table
function addRow()
{
//add a row to the rows collection and get a reference to the newly added row
var newRow = document.all("tblGrid").insertRow();
//add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes
var oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t1'>";
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);'/>";
}
//deletes the specified row from the table
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var oRow = src.parentElement.parentElement;
//once the row reference is obtained, delete it passing in its rowIndex
document.all("tblGrid").deleteRow(oRow.rowIndex);
}
</script>
</head>
<body>
<!-- sample table grid with 3 columns and 4 rows that are presented by default -->
<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();" />
<hr>
</body>
</html>
486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
