DOM应用—可排序的.ppt

第13章 DOM应用—可排序的分页表格 上一章初步接触了文档对象模型“DOM”，讲述了“DOM”的定义、“DOM”的节点类型和“DOM”的树状结构模型。详细讲述了窗口对象的子对象和文档“document”对象的属性和方法等，并通过具体的例子讲解个各个方法在“DOM”操作中的应用。利用这些方法，可以方便的实现页面元素的添加、删除和位置改变等。本章将进一步展示“DOM”在JavaScript中的应用。并将讲解排序算法在JavaScript中的实现。 13.1 示例：可以按不同列排序、支持分页的表格 代码.htm是一个可以按不同列排序，并支持分页的表格。由于代码很长，下面分段解释，完整的代码可以在本书的光盘中获取。 代码.htm 可以按不同列排序、支持分页的表格 html head meta http-equiv=content-type content=text/html; charset=GB2312 / title 可以按不同列排序、支持分页的表格/title style * { font-size:12px; font-family:宋体, Arial; } /*规定了所有的字体样式*/ body { overflow:auto; } a { margin:2px; font-weight:bold; color:#BB8A9F; } #hutia { border-collapse:collapse; border:1px solid black; } #hutia tr { display:none; } #hutia td { border:1px solid black; padding:5px 15px; } #hutia th { border:1px solid black; padding:5px 15px; cursor:pointer; } #nav_bar { margin:10px; } /style 13.2 表格对象的结构与动态改变表格 表格对象是HTML语言中最“古老”的对象之一，曾经在HTML页面布局中起着举足轻重的作用。随着Web2.0的推广和xHTML标准的推行，其在HTML页面中所扮演的角色已经逐渐由布局的工具转变为数据的容器。 13.2.1 xHTML简介 HTML存在着三个主要的缺点：不能够适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML；由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；数据与表现混杂，这样当一个页面需要改变表现样式，就必须重新制作HTML。于是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁。 XML是web发展的趋势，具有严谨、可扩展、简洁等特点，被大量的设备支持。所以人们急切的希望加入XML的潮流中。然而目前网络上绝大多数的页面都是由HTML书写的，直接简单的抛弃HTML是不可能的。因此xHTML成为当前替代HTML标记语言的标准，使用XHTML，只要小心遵守一些简单的规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。就是说，程序员可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。xHTML出现的目的就是可以使web由HTML平滑的过渡到XML。 XHTML的另一个优势在于，此语言非常严密。由于HTML结构上的缺陷，和浏览器的“纵容”，当前网络上的HTML的糟糕情况让人震惊。早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后，必须使用各种浏览器来检测页面，以保证兼容性。不同浏览器中，同一个页面的表现往往会有许多莫名其妙的差异，程序员不得不反复修改设计以便适应不同的浏览器。如果xHTML标准被广泛接受，兼容性的问题将被大大缓解。 13.2.2 表格布局和DIV布局 表格在HTML最初发展起来的时候，常常被用来布局。利用表格的网格表现特性，可以很方便的实现元素的纵向和横向对齐。随着互联网的发展，人们对页面美观的要求越来越高，这就需要实现越来越复杂的页面结构。相应的，在代码层面，表格的嵌套结构也就变得越来越难以理解。在那些有着十几层短捉峁沟谋砀癫季忠趁嬷校酝嫉髡骋徊糠值某寸，无异于一个噩梦。在xHTML标准中，表格被剥去了布局者的功能，布局任务更多的被赋予了“div”元素。 常常有人会误解，认为xHTML就是禁止使用“table”标记，用“div”标记来代替。这其实是错误的。xHTML推荐使用“div”来布局，而不是“table”，是为了实现表现样式和内容的分离。从语义的角度看，“table”应当是一个用来储存2维数据的表格，“div”才是样式的载体。 13.2.3 表格对象的结构 表格包含着若干行和列，犹如一个网