网页数据（共9篇）
网页数据 篇1
1 前言
随着网络带宽的增加,运用B/S模式来构建数据库系统已成为数据库建设中的一种重要方式,用户在体验跨空间、跨平台所带来方便的同时,感觉最大的问题就是在浏览器端不能像Windwos应用程序一样操作数据表格,尤其是在指定对表格中的某一列数据按升序或降序排列表格时操作不便。例如,班主任老师在网页中浏览某一班级学生的所有成绩时,需要按某一门功课的成绩对所有学生进行排序;临时删除某一批学生的成绩记录时,最好能实时显示剩余学生的最高分、最低分以及平均分。根据以往经验,此类操作一般要通过后台服务器重新对数据进行排序、筛选后再发送到客户端。结合作者在编写某学校的教务管理系统中遇到的此类问题,利用JavaScript编程技术来操作静态网页中的数据表格。
2 基本原理
JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言,可以开发交互式Web网页。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加精彩的内容。DOM(Document Object Model)是JavaScript中的一个重要的对象,是以层次结构组织的节点或信息片断的集合,图1是DOM中Table对象的层次结构。
Cell对象也就是单元格对象,在实现对某一列数据排序时,首先要取出表格所有行(Row)中同一位置的单元格数据进行排序,但排序后仍要以表格的形式对数据进行重新显示。为实现这一目标,可构造一个数组,数组中的每个元素包含两个对象,第一个对象是需要排序的数据,第二个对象是包含排序数据的行对象。排序时,仅需对数组中每个元素的第一个对象进行大小、先后比较,如需交换,则是以数组中的元素(含两个对象)为单位进行变化。排序后,显示数据时就可仅显示数组中的每个元素的第二个对象。
采用的快速排序算法,是对冒泡排序算法的一种改进,其基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序序列。
3 设计实现
3.1 静态页面设计
为了简单起见,首先在Macromedia Dreamweaver 8新建一个htm页面,在该页面中放置3个表格,具体数据设置如图2,指定中间表格和下面表格的ID分别为“table1”、“ft1”。
3.2 按列排序
这里设计了可以按前4列进行排序。单击“↑”实现数据表的数据按此列以升序的方式进行排序,单击“↓”实现数据表的数据按此列以降序的方式进行排序,如图3所示。
用户在单击“↑”或“↓”时,会触发一个onclick事件,该事件执行sortTable(obj,rev)函数,其代码如下:
其中快速排序算法代码如下:
3.3 删除操作
单击数据表某一行的“隐藏”超链接时,也会触发一个onclick事件,该事件执行delrow(tbid)函数,其代码如下:
3.4 实时统计
删除数据时,触发的事件会执行modifyfoot(tbid)函数,导致数据的统计发生变化,图4是删除两位学生成绩记录后的显示结果。
其实现代码如下：
3.4.1 最大值的函数
3.4.2 最小值函数
3.4.3 平均值函数
为实现初始化页面时能自动统计,则可以在源代码的