js创建表格跟删除表格中的行
日期：2014-05-16 浏览次数：20473 次
js创建表格和删除表格中的行
<script>
// 为表增加一行
function create()
{
var tableObj = document.getElementById("tab");
alert(tableObj.rows.length);
var newRowObj = tableObj.insertRow(tableObj.rows.length);
// 此处的顺序应该和下面的顺序一致
var newColName = newRowObj.insertCell(newRowObj.cells.length);
var newColGender = newRowObj.insertCell(newRowObj.cells.length);
var newColAge = newRowObj.insertCell(newRowObj.cells.length);
var newColButton=newRowObj.insertCell(newRowObj.cells.length);
newColName.innerHTML = '刘德华';
newColGender.innerHTML = '男';
newColAge.innerHTML = 46;
newColButton.innerHTML = '<input type="button" value="Delete" onclick="deleteCurrentRow(this)">';
}
// 删除一行
function deleteCurrentRow(obj)
{
var trObj = obj.parentNode.parentNode;
var tBody = trObj.parentNode;
tBody.removeChild(trObj);
}
</script>
<html>
<body>
<center>
<input type="button" value="create table" onclick="create()"
<div id="table"></div>
<div>
<table id="tab">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
</div>
</center>
</body>
</html>
<script>
// 为表增加一行
function create()
{
var tableObj = document.getElementById("tab");
alert(tableObj.rows.length);
var newRowObj = tableObj.insertRow(tableObj.rows.length);
// 此处的顺序应该和下面的顺序一致
var newColName = newRowObj.insertCell(newRowObj.cells.length);
var newColGender = newRowObj.insertCell(newRowObj.cells.length);
var newColAge = newRowObj.insertCell(newRowObj.cells.length);
var newColButton=newRowObj.insertCell(newRowObj.cells.length);
newColName.innerHTML = '刘德华';
newColGender.innerHTML = '男';
newColAge.innerHTML = 46;
newColButton.innerHTML = '<input type="button" value="Delete" onclick="deleteCurrentRow(this)">';
}
// 删除一行
function deleteCurrentRow(obj)
{
var trObj = obj.parentNode.parentNode;
var tBody = trObj.parentNode;
tBody.removeChild(trObj);
}
</script>
<html>
<body>
<center>
<input type="button" value="create table" onclick="create()"
<div id="table"></div>
<div>
<table id="tab">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
</div>
</center>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
