位置：首页>> 网络编程>> JavaScript>> JavaScript Table行定位效果

JavaScript Table行定位效果

作者：cloudgamer　来源：cloudgamer博客　发布时间：2009-05-25 10:47:00　

标签：JavaScript,表格,定位,table

近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。

上次做table排序对table有了一些了解，这次更是深入了解了一番，发现table原来是这么不简单。

还不清楚这个效果叫什么，有点像表头固定的效果，就叫行定位吧，本来想把列定位也做出来，但暂时还没这个需求，等以后有时间再弄吧。

如果只是做一个效果也不难，但要做一个通用的，无侵入的就要考虑很多东西了。

效果预览

为方便预览，建议缩小浏览器。

TableFixed.htm

程序原理

一开始的需求只是表头部分在滚动时能一直固定在头部，那关键要实现的就是让tr能定位。
首先想到的方法是给tr设置relative，用ie6/7测试以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body><table cellpadding="5" cellspacing="0" border="1" width="100"> <tr style="position:relative; left:100px;"> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr></table></body></html>

给tr设置relative后就能相对table定位了，看来很简单啊，但问题是这个方法ie8和ff都无效，而且存在很多问题，所以很快就被抛弃了。
ps：该效果用来做tr的拖动会很方便。

接着想到的是给table插入一个新tr，克隆原来的tr，并设置这个tr为fixed（ie6为absolute），例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body><table cellpadding="5" cellspacing="0" border="1" width="100"> <tr style="position:fixed; left:100px;"> <td>1</td> <td>2</td> </tr> <tr style="position:absolute; left:200px;"> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr></table></body></html>

第一个问题是fixed的tr在ie7中不能进行定位，而且td在定位后并不能保持在表格中的布局，这样在原表格插tr就没意义了。

最后我用的方法是新建一个table，并把源tr克隆到新table中，然后通过对新table定位来实现效果。用这个方法关键有两点，首先要做一个仿真度尽可能高的tr，还有是要准确的定位，这些请看后面的程序说明。

2 3 4 5 下一页

投稿

JavaScript Table行定位效果

猜你喜欢