[Javascript]实现固定多层表头的总结与分享

 前几天忙于table固定多层表头的实现,现对其实现过程进行总结如下:

  思路1:完全通过样式来实现,但实现过程中发现页面在Visual Studio 2008、Dreamweaver等开发工具中预览没有任何问题,但在IE显示的时候表头显示不正常,具体问题可参见 求“table固定多层表头”所遇问题的解答!   ,有博友说是“IE的BUG吧。实际的rowspan居然与位于第几行有关(顶部的没多,位于第二行的,多一行,位于第三行的,多二行……)。试几种方法都避不开。”,具体是什么原因到现在还没弄明白(此思路暂未能实现,具体原因还没找到,希望知道的博友帮忙回答一下);

  思路2:通过JS+样式来实现,先把完整表画在页面上,然后在页面加载后,利用脚本,把表头部分在原表中隐藏,之后,在这张完整数据表的上面加一个单独的表,这个表只装表头,不过在统一两个表的列宽的时候花费了我不少力气(此思路已实现)。
   
思路2实现效果图:

思路2实现代码:

Code


思路1实现固定单层表头(奇怪,使用同样的方法,对于实现固定单表头成功,但对于实现固定多层表头却有问题):

效果图如下:

实现代码:

Code

 

     思路1实现固定单表头及固定列:
效果图:

实现代码:

Code

实现表头固定,表体可滚动的GridView:
效果图:

实现方式及代码可参考:http://blog.csdn.net/net_lover/archive/2006/10/10/1328729.aspx
本文参考资料:
http://www.dlmu.net/pe/webdesign/ShowArticle.asp?ArticleID=26970
http://blog.csdn.net/szwangdf/archive/2008/07/31/2750468.aspx

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏