JavaScript Table行定位效果
近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。
上次做table排序对table有了一些了解，这次更是深入了解了一番，发现table原来是这么不简单。
还不清楚这个效果叫什么，就叫行定位吧，本来想把列定位也做出来，但暂时还没这个需求，等以后有时间再弄吧。
效果预览请到这里
完整实例下载
[解决办法]
Up 沙发！~
[解决办法]
先顶再看.
[解决办法]
mark
[解决办法]
up
[解决办法]
我有个客户也要过这种效果 不过我当时处理的比这个差多了 学习下
[解决办法]
学习了,收藏了
[解决办法]
啊，好多啊
[解决办法]
标注
[解决办法]
好代码
[解决办法]
好东西,帮顶
[解决办法]
好东东..谢谢楼主分享...
[解决办法]
好东西
[解决办法]
天啊，楼主太厚道了，又给资料又派分，真是感动的热泪盈眶...
[解决办法]
看看你,我非常惭愧...
[解决办法]
hao aa
[解决办法]
这个有用，好好看下
[解决办法]
study
.
[color=#FFFFFF]人力资源[/color]
[解决办法]
学习
[解决办法]
继续支持
[解决办法]
分是怎么抢的？
[解决办法]
学习了,收藏了
[解决办法]
学习了,收藏了，非常的不错啊
[解决办法]
程序原理
一开始的需求只是表头部分在滚动时能一直固定在头部，那首先要实现的就是让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的意义就没有了。
ps：fixed的相关应用可参考仿LightBox效果。
最后我用的方法是新建一个table，并把源tr克隆到新table中，通过对新table定位来实现。
用这个方法关键有两点，首先要做一个仿真度尽可能高的tr，还有是要准确的定位，这些请看后面的程序说明。
[解决办法]
赞一个，mark
[解决办法]
我怎么看不出具体什么效果呢～
[解决办法]
实例下载看到效果了。不错～～
[解决办法]
好东西，顶一个！！
[解决办法]
楼主作品质量信得过。
[解决办法]
超级强大呀
[解决办法]
这贴又出来了?
[解决办法]
关注
[解决办法]
谢谢分享呵呵
[解决办法]
学习了，感谢
[解决办法]
哈哈，好！以前虽然有过这种想法不过水平太菜，终于有机会见识了！
[解决办法]
学习 加收藏
[解决办法]
好东西！
学习学习！
[解决办法]
楼主的作品效果不错,但原因明显不对,Table要是大数据量,就要用Tbody了
[解决办法]
效果不错,up
[解决办法]
再次看到如此强大的好贴，支持
[解决办法]
学习 up+mark
[解决办法]
学习了，始终没有研究这么深过，收藏
[解决办法]
好.
[解决办法]
我倒，lz你看看这个，
以前见过这个效果，我了解一些css,变通的方式，很简单的方法，用css就可以解决了
我看你用js要实现功能要关注那么多细节，还要兼容浏览器，太麻烦了，而且还容易出问题。
呵呵，你看看这个怎么样 ie8,ff3都试了，没问题。
示例地址
http://hehe.mysky2008.com/self/css/tablefixed.html
[解决办法]
类似execl的窗口冻结功能
学习
[解决办法]
没看太明白
[解决办法]
这么好竟然没人顶！！！！！！！！！！！！！狂顶
------解决方案--------------------
楼主的东西看了不好，很强大！
[解决办法]
楼主很强大，顶顶顶！！！
[解决办法]
学习
[解决办法]
很不错，下载收藏了
[解决办法]
mark
[解决办法]
mark
[解决办法]
mark
[解决办法]
嗯,淘宝这样的效果还真不错,
是我没看明白,你想要这种效果
不错,顶一个
[解决办法]
不错,顶一个
[解决办法]
很不错.现在人也太强了吧
[解决办法]
谢谢楼主,顶
[解决办法]
顶LZ，谢谢分享～
[解决办法]
好东西，先收藏了...
[解决办法]
Mark,,.....
[解决办法]
很强大
[解决办法]
mark
[解决办法]
典藏
[解决办法]
学习
[解决办法]
这个比较猛阿
[解决办法]
mark
[解决办法]
用样式可以做到
[解决办法]
8错!
[解决办法]
学习学习
[解决办法]
谢谢楼主分享。js小鸟在此学习了。
[解决办法]
楼主你给的不是完美下载啊，怎么还是链接到你博客上的呢？
[解决办法]
学习了
[解决办法]
好东西！让我收获不少！
[解决办法]
学习了
[解决办法]
up
[解决办法]
00
[解决办法]
good！
[解决办法]
好东西要顶，感谢分享，感谢无私，感谢对促进大家编程提高的贡献。
下来研究，学习。。
[解决办法]
mark
[解决办法]
了解了！谢谢～
