JavaScript教程：JS表格动态添加删除行(兼容IE和Firefox)
JavaScript教程：JS表格动态添加删除行(兼容IE和Firefox)——程序代码如下详细叙述：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//添加行
function addRow(){
var tableObj = document.getElementById("test");
var rowLength = tableObj.rows.length;
var newTr = document.createElement("tr");
var newTd0 = document.createElement("td");
var newTd1 = document.createElement("td");
newTd0.innerHTML = rowLength-1;
newTd1.innerHTML = "测试数据" +(rowLength-1);
newTr.appendChild(newTd0);
newTr.appendChild(newTd1);
var lastTr = tableObj.rows[rowLength-1];
lastTr.parentNode.insertBefore(newTr,lastTr);
}
//删除行
function deleteRow(){
var tableObj = document.getElementById("test");
var lastTrIndex = tableObj.rows.length - 2; //表格最后一行索引
if(lastTrIndex > 0){
tableObj.deleteRow(lastTrIndex);
}
}
</script>
</head>
<body>
<table id="test" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:300px;font-size:12px;text-align:center;">
<tr height="26">
<td width="30%">序号</td>
<td width="70%">内容</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="增加一行" onclick="addRow()"/> <input type="button" value="删除一行" onclick="deleteRow()"/>
</td>
</tr>
</table>
</body>
</html>
之所以没用insertRow()和insertRow()方式来动态添加行和列，主要是考虑性能问题，当需要大批量创建行列时，用dom的createElement()方式创建并appendChild追加到指定元素里，确实性能要好很多，因为insertRow、insertRow会导致整个dom结构重新渲染，这个是致命的缺陷。
本文来源 我爱IT技术网 http://www.52ij.com/jishu/107.html 转载请保留链接。
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-