jQuery制作多表格固定表头、切换表头的特效

做了好几天的固定表头特效，总算是搞定了。先说明一下基本功能：我们在一个网页上浏览很多份表格数据的时候，肯定会碰到很多分不清表头，也分不清表 格是哪个的情况，这个时候我们就希望能有一种功能，就是我们再下拉滚动条的时候，表格的表头固定住。这样对付只有一张表格的网页还好，如果表格多了，又会 很麻烦。我做的这个特效综合了固定表格表头的功能，同时，还能在浏览不同表格时候，切换固定的表头。效果如图所示：




网页上有两个表格




拉动滚动条，固定第一个表格的表头




继续拉动滚动条，切换并到第二个表格的表头

我 在做这个特效的时候，首先考虑的是怎样固定住表头。在网上搜到一个不错的固定表头Jquery插件-chromatable。基本的思路都一样，就是现将 整个表格复制一遍，然后将表头和表身分离，分别用div包住，设置好表身最大的高度，并显示滚动条，在拉动滚动条时，表头因为已经和表身分离，所以不会随 着页面下拉而滚动。我将这个插件重写了一遍，代码如下：

帮助
接下来，我在网上搜了一下怎样固定，同时切换块级元素。代码如下：

帮助
最后，综合上面的两种功能，先修改插件chromatable中的代码，将 "$this.next().append("<div class='ScrollDiv' style='overflow-y:scroll;'></div>");"

这一行代码中的style='overflow-y:scroll'样式去掉，这样就不会出现滚动条。然后，将头部的代码包裹在一个class属性
为'ScrollHeader'的div中。代码如下：

帮助
接着，我们还要将切换代码写进去，我们来到表格页面，加入以下jquery代码：

帮助
最后，我在这里要说明以下我犯的两个小错误，第一个就是在写Jquery代码时，将固定格式：

帮助
中的"jQuery"写成了Jquery，耗了我很多精力去排错！

jQuery(function(){　});用于存放操作DOM对象的代码，执行其中代码时DOM对象已存在。不可用于存放开发插件的代码，因为jQuery对象没有得到传递，外部通过jQuery.method也调用不了其中的方法（函数）。
(function(){　})(jQuery)；用于存放开发插件的代码，执行其中代码时DOM不一定存在，所以直接自动执行DOM操作的代码请小心使用。

第
二个就是，我刚刚开始把切换表头的代码写在插件文件一起，发现bodyTop的值一直没有变过，只有刷新一下才能实现功能，原来是要加入滚动条事件来不断
触发函数保证动态获取滚动条鼓励顶部的值bodyTop。但是，一定要将这个函数分离出来，如果写在一起，就会让整个固定表头的脚本也随着滚动条的拖动而
不断运行。

最后，将上面的三个例子全部都共享出来给大家下载。

DEMO下载地址>>(说明：demo1：表头固定插件，demo2：切换和固定div，demo3：切换和固定表头。)