29.3 处理网页表格内容（DHTML）

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

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

29.3 处理网页表格内容（DHTML）

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

技术要点

本节代码主要使用了DHTML对象模型方法处理网页中的表格内容的方法，其主要实现步骤如下。

通过

标记中的id得到表格对象，或通过innerHTML插入表格对象。

通过表格对象的insertRow方法在表格中插入行。

通过行对象的insertCell方法在行中插入表格元素。

通过表格元素对象的innerHTML方法添加表格元素中的内容。

通过行对象的deleteCell方法删除行中的表格元素。

通过表格对象的deleteRow方法删除表格中的行。

实现代码

<!------------------------------文件名：29.3.htm------------------------------>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DHTML对象模型方法</title>
<script language="JavaScript">
<!--
function addRow()              //添加行
{
var tableObj = document.getElementById("mainTb");  //获取表格相关属性
//设置行、名称、单位、按钮等相关变量
var newRowObj = tableObj.insertRow(tableObj.rows.length);
var newNameCell = newRowObj.insertCell(newRowObj.cells.length);
var newCompanyCell = newRowObj.insertCell(newRowObj.cells.length);
var newButtonCell = newRowObj.insertCell(newRowObj.cells.length);
//添加“姓名”表元
newNameCell.innerHTML = document.getElementById("newName").value;
//添加“单位”表元
newCompanyCell.innerHTML = document.getElementById("newCompany").value;
//添加“删除”表元
newButtonCell.innerHTML = '<input type="button" value="删除"
onclick="deleteRow('+(tableObj. 
rows.length-1)+')">';
}
function deleteRow(index)      //删除行
{
var tableObj = document.getElementById("mainTb");  //获取表格相关属性
tableObj.deleteRow(index);       //删除指定行
}
//-->
</script>
</head>
<body  bgcolor="#FFC0C0" style="margin:40px">
<h2>处理网页中的表格内容</h2><hr><br>
<table id="mainTb" border="1">
<tr><th width="80">姓名</th><th width="250">单位</th></tr>
<tr id="row0"><td>张辰刚</td><td>北京华夏食品有限公司</td>
<td><input type="button" value="删除" onclick="deleteRow(0)"></td></tr>
<tr id="row1"><td>郭兴旺</td><td>广州天河文化传播公司</td>
<td><input type="button" value="删除"onclick="deleteRow(1)"></td></tr>
</table><br>
<div><hr>
<span id="new">
姓名：<input type="text" name="newName" id="newName"><br>
单位：<input type="text" id="newCompany">&nbsp;
<input type="button" value="添加" onclick="addRow()">
</span>
</div>
</body>
</html>

运行该程序后的显示效果如图29.7所示。在页面中的文本框中分别填写“姓名”和“单位”，并单击“添加”按钮，就会在上面的表格结尾添加新的记录，如图29.8所示。单击每条记录后面的“删除”按钮，该条记录将被删除，如图29.9所示是仅留一条记录时的显示结果。

图29.7 代码29.3.htm显示结果

图29.8 添加记录

图29.9 删除记录后

源程序解读

（1）程序定义了一个名为mainTb的表格、一个名为newName的文本框、一个名为newCompany的文本框、一个“添加”按钮和若干“删除”按钮。

（2）“删除”按钮的onclick事件关联deleteRow( )函数，用于删除指定的行。在函数中，首先使用“document.getElementById("mainTb")”获取表格的相关属性，并将其存储在变量tableObj中，然后使用“tableObj.deleteRow(index);”删除指定的行。

（3）“添加”按钮的onclick事件关联函数addRow( )，用于添加新的行。在函数中，首先使用“document.getElementById("mainTb")”获取表格的相关属性，并将其存储在变量tableObj中，随后，设置行、名称、单位、按钮等相关变量，然后，使用“document.getElement ById("newName").value”添加“姓名”表元，使用“document.getElementById("newCompany"). value”添加“单位”表元。最后，再添加“删除”表元。

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

回书目 上一节 下一节

关于 DHTML 模型 insertCell deleteCell deleteRow 精通JavaScript动态网页编程的

文章

博文

帖子

· 29.2 显示和修改文字内容（DHTML）(10/15)

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

· 1.1.4 模型选择不当导致六类链路故障(06/25)

· 1.1.1 模型1(06/22)

· C#发现之旅之终结篇第十讲文档对象模型(06/04)

· Swing-JTree树模型的操作

· 关于物流的5种模型10种算法的实现

· RUP大讲堂(第八讲)-基于模型转换的OOAD

· Spring AOP 应用模型

· 整理OSI参考模型

· 关于OSI七层模型的数据链路层谁有比较好的教材

· OSI—7层模型

· OSI7层模型

· packet tracer中有没有三层交换机的模型呢

· 您是模型制作高手吗? 帮帮偶吧

专题

我也说两句

叫好

拍砖

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

·假期读书充电

· 第六章　你能帮我吗？..
· 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病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范，涉及到了安全应用的全部领域, 由浅至深内容全面。

专题

最多好

最多砖