JavaScript Table行定位效果
作者:cloudgamer 来源:cloudgamer博客 发布时间:2009-05-25 10:47:00
标签:JavaScript,表格,定位,table
近来有客户要求用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,还有是要准确的定位,这些请看后面的程序说明。


猜你喜欢
- vue Print.js打印页面样式不出现解决方案加上这句就好了!完美!vue-print-nb打印问题总结1、表格的列缺失(element
- 基本要点:程序中储存的所有数据都是对象(可变对象:值可以修改 不可变对象:值不可修改)每个对象都有一个身份、一个类型、一个值例: >&
- 本文实例讲述了php验证session无效的解决方法。分享给大家供大家参考。具体方法如下:一、问题今天在配置 apache+php环境时折腾
- 网络训练中,loss曲线非常奇怪交叉熵怎么会有负数。经过排查,交叉熵不是有个负对数吗,当网络输出的概率是0-1时,正数。可当网络输出大于1的
- innerHTML 属性的使用非常流行,因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2
- copy()chutil.copy(source, destination)shutil.copy() 函数实现文件复制功能,将 sourc
- AttribteError: ‘module' object has no attribute xxx'描述:模块没有相关属
- 所以就为FCKeditor写了个InsertCode的插件。整个插件的制作过程非常简单:FCKeditor插件开发请参考FCKeditor官
- 图形检测在计算机视觉开发中是一项非常重要的操作,算法通过对图像的检测,分析出图像中可能存在哪些形状。除此之外,除了让计算机识别轮廓之外,轮廓
- 本文实例讲述了Python实现将sqlite数据库导出转成Excel(xls)表的方法。分享给大家供大家参考,具体如下:1. 假设已经安装带
- 我们可以通过更改注册表来解决这个问题: 打开注册表,进入到[HKEY_USERS\.DEFAULT\Control Panel\Intern
- 选择排序选择排序是一种简单的比较排序算法,它的算法思路是首先从数组中寻找最小(大)的元素,然后放到数组中的第一位,接下来继续从未排序的元素中
- 背景:Python是一种解释性的语言,执行速度相比C、C++等语言十分缓慢;因此我们需要在其它地方上下功夫来提高代码的执行速度。首先需要对代
- RFC文档有很多,有时候在没有联网的情况下也想翻阅,只能下载一份留存本地了。看了看地址列表,大概是这个范围:http://www.netwo
- 先准备好软件:一、安装Apache,配置成功一个普通网站服务器 运行下载好的“apache_2.0.55-win32-x86-no_ssl.
- 本文介绍的是关于Python列表项排序的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:典型代码1:data_list = [6,
- 文章摘要:其实这里casperjs与python没有直接关系,主要依赖casperjs调用phantomjs webkit获取html文件内
- 本文实例讲述了php7 图形用户界面GUI 开发。分享给大家供大家参考,具体如下:一、下载指定系统扩展http://pecl.php.net
- 直接赋值: 对象的引用,也就是给对象起别名浅拷贝: 拷贝父对象,但是不会拷贝对象的内部的子对象。深拷贝: 拷贝父对象. 以及其内部的子对象在
- <?php function CreateShtml() { ob_start(&quo