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
投稿猜你喜欢
python matplotlib中的subplot函数使用详解
2021-02-18 00:00:28
Python全栈之递归函数
2021-04-05 16:44:54
解决Python3用PIL的ImageFont输出中文乱码的问题
2022-09-09 04:49:22
基于Python手写拼音识别
2022-10-22 09:24:09
python登陆asp网站页面的实现代码
2021-01-20 00:03:31
js获取css的各种样式并且设置他们的方法
2024-04-18 10:10:33
Opera下cloneNode的bug
2007-11-23 11:40:00
Python提取支付宝和微信支付二维码的示例代码
2021-04-08 19:38:42
Centos 7 安装mysql5.7.24二进制 版本的方法及解决办法
2024-01-21 22:18:58
python读文件保存到字典,修改字典并写入新文件的实例
2021-09-19 05:37:57
一些你可能不熟悉的JS知识点总结
2024-04-17 09:46:24
利用python进行文件操作
2022-01-09 10:49:51
bpython 功能强大的Python shell
2022-05-08 22:12:06
Python实现Tab自动补全和历史命令管理的方法
2022-06-16 10:12:46
python增加图像对比度的方法
2022-11-06 09:35:37
利用ajax制作在线翻译聊天室
2007-12-28 21:44:00
hadoop二次排序的原理和实现方法
2023-01-16 22:42:31
javascript农历日历及世界时间代码
2007-12-21 13:25:00
Python CSV模块使用实例
2022-02-04 18:56:36
关于Python正则表达式 findall函数问题详解
2022-10-24 22:18:43