首页 > 代码库 > 动态操作表格行(兼容IE、火狐)
动态操作表格行(兼容IE、火狐)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
var fChild;
//兼容IE、火狐浏览器
function setChild(){
var table = document.getElementById("tb");
//table.firstChild在IE下获取到TBODY,在火狐下获取不到
fChild = table.firstChild.tagName=="TBODY"?table.firstChild:table;
}
//给表格动态添加行
function addRow(){
var table = document.getElementById("tb");
var tr=document.createElement("tr");//创建一个tr标签
var td1 = document.createElement("td");//创建一个td标签(单元格)
var text1 = document.createTextNode(document.getElementById("txt1").value);//创建一个文本节点
td1.appendChild(text1);//将文本节点添加到td1单元格中
var td2 = document.createElement("td");
var text2 = document.createTextNode(document.getElementById("txt2").value);
td2.appendChild(text2);
tr.appendChild(td1);//将单元格添加到行中
tr.appendChild(td2);
fChild.appendChild(tr);//将行添加到表格中
}
//删除表格第一行
function delFirstRow(){
var table = document.getElementById("tb");
fChild.removeChild(fChild.firstChild);
}
//删除表格最后一行
function delLastRow(){
var table = document.getElementById("tb");
fChild.removeChild(fChild.lastChild);
}
//删除表格的指定行
function delRow(){
var table = document.getElementById("tb");
var rows = table.getElementsByTagName("tr");
var count = parseInt(document.getElementById("txtDel").value);
fChild.removeChild(rows[count-1]);
}
</script>
</head>
<body onl oad="setChild()"> <table width="200" id="tb" border="1">
<tr>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
</table>
<hr />
单元格1：<input type="text" id="txt1"/>
单元格2：<input type="text" id="txt2"/>
<input type="button" onclick="addRow()" value="http://www.mamicode.com/添加行"/>
<input type="button" onclick="delFirstRow()" value="http://www.mamicode.com/删除第一行"/>
<input type="button" onclick="delLastRow()" value="http://www.mamicode.com/删除最后一行"/><br />
删除第几行：<input type="text" id="txtDel"/>
<input type="button" onclick="delRow()" value="http://www.mamicode.com/删除"/>
</body>
</html>