[转载]处理网页表格内容

原文地址: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);”完成新行的添加。

此条目发表在Program, 转载分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>