HTML表格操作-优快云博客

一介绍

删除表格的指定表格行使用HTMLTableElement对象的如下方法：deleteRow

删除表格行的指定单元格使用HTMLRowElement对象的如下方法：deleteCell

二代码

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)"/>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>删除表格的行和格</title>
</head>
<body>
<input id="delrow" type="button" value="删除表格最后一行"
 οnclick="delrow();"/><br />
<input id="delcell" type="button" value="删除最后一行的最后一格"
 οnclick="delcell();"/><br />
<table id="test" border="1" style="width:400px;">
<caption>疯狂Java体系</caption>
<tr>
<td>疯狂Java讲义</td>
<td>轻量级Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
<td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂XML讲义</td>
<td>疯狂Android讲义</td>
</tr>
</table>
<script type="text/javascript">
// 获取目标表格
var tab = document.getElementById("test");
// 删除行的函数
var delrow =function()
{
if(tab.rows.length >0)
{
// 删除最后一行
 tab.deleteRow(tab.rows.length -1);
}
}
// 删除目标表格的最后一格
var delcell =function()
{
// 获取表格的所有行
var rowList = tab.rows;
// 获取表格的最后一行
var lastRow = rowList.item(rowList.length -1);
if(lastRow.cells.length >0)
{
// 删除表格的最后一格
 lastRow.deleteCell(lastRow.cells.length -1);
}
}
</script>
</body>
</html>

三运行结果