原文地址：http://book.csdn.net/bookfiles/527/10052717845.sht
处理网页表格内容（W3C）
本节实例给出一段使用W3C对象模型方法处理网页中的表格内容的示例代码。用户可以随意添加或删除表格内容。
技术要点
本节代码主要使用了W3C对象模型方法处理网页中的表格内容的方法。要使用W3C文档对象模型方法处理表格，表格中必须包含<tbody></tbody>标记，否则可能出现不可预测的结果。其基本步骤如下。
通过文档对象的creatElement(“table”)方法创建新表格对象，或通过<table>标记中的id得到表格对象。
通过文档对象的creatElement(“tbody”)方法新建表格体对象，或通过<tbody>标记中的id得到表格体对象。
通过文档对象的creatElement(“tr”)方法新建表格行对象，或通过<tr>标记中的id得到行对象。
通过文档对象的creatElement(“td”)方法新建表格元素对象，或通过<td>标记中的id得到表格元素对象。
通过表格元素对象的innerHTML方法添加表格元素中的内容。
通过节点对象的appendChild方法添加上述各级节点对象。
通过节点对象的removeChild方法删除节点对象。
实现代码
<!——————————文件名：29.5.htm——————————>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>W3C对象模型方法</title>
<script language=”JavaScript”>
<!–
function addRow()//函数：添加行
{ //获取表格相关属性
var tableObj = document.getElementById(“mainTb”);
//设置行、id、名称、单位、按钮等相关变量
var tableBodyObj = document.getElementById(“mainBody”);
var newRowObj = document.createElement(“tr”);
newRowObj.id = “row” + (tableObj.rows.length-1);
var newNameCell = document.createElement(“td”);
var newCompanyCell = document.createElement(“td”);
var newButtonCell = document.createElement(“td”);
//设置名称、单位、按钮等相关属性
newNameCell.innerHTML = document.getElementById(“newName”).value;
newCompanyCell.innerHTML =
document.getElementById(“newCompany”).value;
newButtonCell.innerHTML =
‘<input type=”button” value=”删除”
onclick=”deleteRow(‘+(tableObj.rows.length-1)+’)”>’;
newRowObj.appendChild(newNameCell); //添加“姓名”表元
newRowObj.appendChild(newCompanyCell); //添加“单位”表元
newRowObj.appendChild(newButtonCell); //添加“删除”表元
tableBodyObj.appendChild(newRowObj); //添加新行
}
function deleteRow(index) //函数：删除行
{
var tableBodyObj = document.getElementById(“mainBody”);
var rowObj = document.getElementById(‘row’+index);
tableBodyObj.removeChild(rowObj); //删除行
}
//–>
</script>
</head>
<body style=”margin:40px” bgcolor=”#ffc0c0″>
<h2>处理网页中的表格内容</h2><hr><br>
<table id=”mainTb” border=”1″>
<tbody id=”mainBody”>
<tr><th width=”80″>姓名</th><th width=”250″>单位</th></tr>
<tr id=”row0″><td>张辰刚</td><td>北京华夏食品有限公司</td>
<!–通过onclick调用deleteRow(0)删除行，其中0是该行序号–>
<td><input type=”button” value=”删除” onclick=”deleteRow(0)”></td></tr>
<tr id=”row1″><td>郭兴旺</td><td>广州天河文化传播公司</td>
<!–通过onclick调用deleteRow(1)删除行，其中1是该行序号–>
<td><input type=”button” value=”删除” onclick=”deleteRow(1)”></td></tr>
</tbody>
</table>
<div><br>
<span id=”new”>
姓名 <input type=”text” name=”newName” id=”newName”><br>
单位 <input type=”text” id=”newCompany”>
<input type=”button” value=”新增” onclick=”addRow()”>
</span>
</div>
</body>
</html>
运行该程序后的显示效果如图29.14所示。在页面中的文本框中分别填写“姓名”和“单位”，并单击“添加”按钮，就会在上面的表格结尾添加新的记录，如图29.15所示。单击每条记录后面的“删除”按钮，该条记录将被删除，如图29.16所示仅留一条记录时的显示结果。
图29.14 代码29.5.htm显示结果 图29.15 添加记录
图29.16 删除记录后
源程序解读
（1）程序定义了一个名为mainTb的表格、一个名为newName的文本框、一个名为newCompany的文本框、一个“添加”按钮和若干“删除”按钮。
（2）“删除”按钮的onclick事件关联deleteRow( )函数，用于删除指定的行。在函数中，首 先使用“document.getElementById(“mainBody”)”获取表格主体的相关属性，并将其存储在变量tableBodyObj 中，然后使用“tableBodyObj.removeChild(rowObj);”来删除指定的行。
（3）“添加”按钮的onclick事件关联函数addRow( )，用于添加新的行。在函数中，首先使用 “document.getElementById(“mainTb”)”获取表格的相关属性，并将其存储在变量tableObj中；随后，设置设置行、 id、名称、单位、按钮等相关变量，以及设置行、名称、单位、按钮等相关变量；然后，使用“document.getElementById (“newName”).value”添加“姓名”表元，使用“document.getElementById(“newCompany”). value”添加“单位”表元，再添加“删除”表元。
（4）最后，使用“tableBodyObj.appendChild(newRowObj);”完成新行的添加。