JavaScript Table行定位效果
作者:cloudgamer 来源:cloudgamer博客 时间:2009-05-25 10:47:00
近来有客户要求用table显示一大串数据,由于滚动后就看不到表头,很不方便,所以想到这个效果。
上次做table排序对table有了一些了解,这次更是深入了解了一番,发现table原来是这么不简单。
还不清楚这个效果叫什么,有点像表头固定的效果,就叫行定位吧,本来想把列定位也做出来,但暂时还没这个需求,等以后有时间再弄吧。
如果只是做一个效果也不难,但要做一个通用的,无侵入的就要考虑很多东西了。
效果预览
为方便预览,建议缩小浏览器。
程序原理
一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。
首先想到的方法是给tr设置relative,用ie6/7测试以下代码:
给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。
ps:该效果用来做tr的拖动会很方便。
接着想到的是给table插入一个新tr,克隆原来的tr,并设置这个tr为fixed(ie6为absolute),例如:
第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。
最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。
标签:JavaScript,表格,定位,table
0
投稿
猜你喜欢
利用JavaScript正则表达式模拟Google Talk的文本处理
2007-12-04 18:43:00
css基础教程布局篇之一
2008-07-31 17:21:00
SQL常用数据库操作命令使用方法
2007-08-22 13:24:00
[翻译]标记语言和样式手册 Chapter 13 为文字指定样式
2008-02-15 16:08:00
谈切图优化加速图片显示—淘宝实例
2008-01-30 12:24:00
13个超酷的js显示时间效果
2007-08-30 09:52:00
什么是Ajax及Ajax的优势
2007-09-07 09:56:00
MySQL优化之数据表的处理
2008-12-22 14:45:00
简单方法实现网页自动适应任何分辨率任何窗口大小
2008-09-13 19:28:00
MYSQL 数据库同步
2008-11-24 12:39:00
如何用变量实现群聊和悄悄话?
2010-05-19 21:33:00
解析:在SQL Server下数据库链接的使用
2009-01-23 13:37:00
网站通过W3C标准注意点
2010-01-14 20:15:00
asp开发中textarea常见问题
2008-04-13 06:34:00
SQL Server数据库对上亿表的操作
2008-11-16 18:13:00
asp MYSQL出现问号乱码的解决方法
2011-04-15 11:13:00
CSS绝对定位在宽屏分辨率下错位
2009-07-28 12:24:00
javascript基础之indexOf函数
2008-06-25 13:28:00
如何用表单在线建立目录?
2010-06-16 09:49:00
sql server 触发器实例代码
2012-01-05 19:09:28