JavaScript Table行定位效果解决思路
日期：2014-05-16 浏览次数：20462 次
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">
近来有客户要求用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">
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
