29.5 处理网页表格内容（W3C）

作者: 王润森、王俊杰出处:人民邮电出版社　2007-10-15 15:30　砖好评论条　进入论坛

阅读提示：《精通JavaScript动态网页编程》第二十九章主要讲的网页样式与元素定位，本节介绍了处理网页表格内容（W3C）。

29.5 处理网页表格内容（W3C）

本节实例给出一段使用W3C对象模型方法处理网页中的表格内容的示例代码。用户可以随意添加或删除表格内容。

技术要点

本节代码主要使用了W3C对象模型方法处理网页中的表格内容的方法。要使用W3C文档对象模型方法处理表格，表格中必须包含标记，否则可能出现不可预测的结果。其基本步骤如下。

通过文档对象的creatElement("table")方法创建新表格对象，或通过

标记中的id得到表格对象。

通过文档对象的creatElement("tbody")方法新建表格体对象，或通过

标记中的id得到表格体对象。

通过文档对象的creatElement("tr")方法新建表格行对象，或通过

标记中的id得到行对象。

通过文档对象的creatElement("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);”完成新行的添加。

【责任编辑：杜书 TEL：（010）68476606】

回书目 上一节 下一节

关于 W3C creatElement innerHTML removeChild appendChild 精通JavaScript动态网页编程的

文章

博文

帖子

· 29.4 显示和修改网页内容（W3C）(10/15)

· 3.7.2 灵感问题(05/25)

· HTML 5公测草案发布推动Web标准与互操作性(01/28)

· 精通JavaScript动态网页编程目录(10/16)

· 精通JavaScript动态网页编程前言(10/16)

· 什么是W3C标准

· W3C专业术语翻译对照表

· W3C本月下旬将在北京开中国首个办事处

· CCNA基础实验--NAT之二Static NAT

· 104届广交会通知

· www.w3c-org.com/c.htm是什么arp啊

· HW3com组播培训资料

· ctrl +z的好处

· Windows清理助手+Sreng，木马查杀绝配

专题

我也说两句

叫好

拍砖

中国最大的网络技术网站 ·
技术成就梦想

·假期读书充电

· 第六章　你能帮我吗？..
· Linux笔试面试题选摘测..
· 08年5月软考网管上午真..
· 性能测试从零开始目录
· 08年5月软考网工上午真..
· 上周拒绝服务攻击（DDo..

· 08年5月各大网上书店及..
· 2008年5月24日软考试题..
· 软件设计师专家临考模..
· 上周网络管理员专家自..
· 网络工程师自测获奖名..
· 08年4月各大网上书店及..

排行榜

·假期读书充电 (查看6738次)
·1.2 网络定义 (查看1197次)
·《网管员必读—网络应用》自测.. (查看1090次)
·SQL Server入门到精通技术自测.. (查看1088次)
·历次技术自测获奖网友详细信息 (查看1040次)

·SQL Server入门到精通技术自测试题答案 (8个砖)
·超级网管员——网络应用技术自测试题答案 (6个砖)
·历次技术自测获奖网友详细信息 (4个砖)
·网管员全真面试题自测获奖结果及答案解析 (4个砖)
·免费讲座：搜索引擎营销打造成功网站 (3个砖)

·假期读书充电 (13个好)
·SQL Server入门到精通技术自测试题答案 (4个好)
·Visual C++数字图像处理开发入门与编程实践 (3个好)
·路由器配置自测获奖结果及答案解析 (3个好)
·《游戏开发核心技术-剧本与角色创造》阅读不枯燥 (3个好)

·Ajax+JSP网站开发从入门到精通 (06月)
·ASP.NET Ajax网站开发从入门到精通 (06月)
·非常网管——网络管理从入门到精通 (06月)
·ANT IN ACTION 第2版中文版 (06月)
·欺骗的艺术 (06月)

·ARP协议及欺骗原理
·独家体验：在西三环亲历北京免费无..

· 周末病毒预报：视频宝..
· NAC精要指南:什么是网..
· 布线测试中的常见问题..
· ASP.NET Ajax网站开发..
· 网管员必读：网络链路..
· SQL Server 2008中不推..
· 路由器故障排除实例讲解
· Cisco 认证考试费用全..

· 微软针对XP SP2的远程..
· 山东临沂网通联合公安..
· Cisco考试费用全线涨价..
· 企业无线网络设置10大..
· Windows Server 2003网..
· 上海宣判三起网络知识..
· 微软Sever 2008自带虚..
· 金山信息安全技术公司..

订阅技术快讯

电子杂志下载

名称：SQL Server数据库管理精品黄皮书
简介：书中文章经过精挑细选，便于用户能根据自己的实际工作和学习，快速在本书寻找到相关资料。内容涵盖了SQL Server的安装与升级、语句查询、数据备份和恢复、自动化任务、数据同步、数据字典、安全和预防、性能和优化、集群等各方面应用信息，以及DBA管理人员在数据库管理工作中

名称：2007路由技术大全
简介：《2007路由技术大全》由51CTO.com网站特别策划制作，该书包括路由器技术、路由器产品、路由器配置、安全设置、路由器故障处理、路由器密码恢复，以及广大网友在实践使用中的心得经验和技巧文章，内容注重实用性，适用于初学者入门，也适合多年从业者提高，是一本实践和理论完

名称：网络安全精品应用黄皮书
简介：《2007精品网络安全黄皮书》包括了9个大类24个小类， 800余篇文章，内容包含了熊猫烧香病毒、DDOS攻击、ARP病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范，涉及到了安全应用的全部领域, 由浅至深内容全面。

专题

最多好

最多砖