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

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

网页上有两个表格

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

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

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

帮助

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

(function ($) { $.fn.extend({ ScrollTable: function (options) { var defaults = { MaxHeight: 600, MaxDataItemIndex: 1 // 固定前MaxDataItemIndex作为固定表头 }; options = $.extend(defaults, options); return this.each(function () { var $this = $(this); //设置表格自动换行 $this.css({"table-layout":"fixed"}); $this.find('td').css({"word-break":"break-all","word-wrap":"break-word"}); // 产生表头部分和身体部分 var $cloneTableHeader = $this.clone(); var $cloneTableBody = $this.clone(); $cloneTableHeader.find("tr").filter(function (index) { return index >= options.MaxDataItemIndex }).remove(); $cloneTableBody.find("tr").filter(function (index) { return index < options.MaxDataItemIndex }).remove(); //设置单元格边框 $cloneTableHeader.find("tr").css({"border":"1px blue solid"}); $cloneTableBody.find("td").css({"border":"1px blue solid"}); // 将产生的表头和身体部分放入Container，并做一些微调 $this.after("<div class='ScrollTableContainer' style='border:1px solid;margin:10px 0;'></div>"); $this.next().append($cloneTableHeader); $this.next().append("<div class='ScrollDiv' style='overflow-y:scroll;'></div>"); $this.next().css("width", $this.width()); $this.next().find("div.ScrollDiv").css({ "max-height": options.MaxHeight, "margin-top": -2 }); $this.next().find("div.ScrollDiv").append($cloneTableBody); $this.remove(); }); } }); })(jQuery)

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

帮助

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

<script> $(function () { //设置内容块的宽度与导航块的宽度一样 $(".Xc_list_top").css("width",$(".Xc_list_main").width()); var resetRightPanelPostion = function () {   //在JQuery中，可以利用导航工具类$.browser来判断浏览器类型   var msie6 = $.browser.msie && $.browser.version == '6.0' && $.browser.version < 7;   //获取body元素标签   if ($.browser.safari) {     bodyelem = $("body");   } else {     bodyelem = $("html,body");   }   //$(selector).scrollTop(offset)，offset是相对滚动条顶部的偏移，以像素计。获取滚动条距离顶部的距离。   var bodyTop = bodyelem.scrollTop();   //offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。这里是获取相对于文档的顶部偏移。   var top = $(".Xc_left").offset().top;   //var t = $("#public_footer").offset().top;   var t = $("#footerDestinationBox").offset().top;   //var bottom = $("#footerDestinationBox").offset().top;   //循环遍历class为Xc_list_top的数组的成员   for(var i = 0; i < $(".Xc_list .Xc_list_top").length ; i++){     /*标准浏览器下：     height:高度     innerHeight:高度＋补白     outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距*/     //当滚动条向下移动的偏移量大于等于元素相对文档顶部的偏移量时（即左边的div顶部接触到窗口顶部）     //滚动条往下拉动的距离等于底部相对顶部偏移量不断减少的距离，所以     //bodyTop = t - $("#footerDestinationBox").offset().top     //当底部div距离顶部的长度等于左边div的     //outheight = $("#footerDestinationBox").offset().top时，     //底部与$('.Xc_left')接触     //所以(bodyTop + $(".Xc_left").outerHeight())<t)指底部的div还没有将左边的div完全顶出。 if (bodyTop >= top && ((bodyTop + $(".Xc_left").outerHeight()) < t)) { //如果ie浏览器的版本不是6或6以下   if (!msie6) {     if (bodyTop + $(".Xc_gg").outerHeight() >= t) {         $(".Xc_gg").removeClass('fixed').css({            "position": "absolute",            "top": t - $(".Xc_gg").outerHeight() + "px"         });     } else {         $(".Xc_gg").css({            "position": "fixed",            "top": 0         });     }   } } else {   if (!msie6) {     $(".Xc_gg").css({     "position": "static"   });   } } /*if(bodyTop>$(".Xc_list").eq(i).offset().top){   $(".Xc_list_top").eq(i).css({position:"absolute",top:top-168}); }*/    if(bodyTop>$(".Xc_list").eq(i).offset().top){      $(".Xc_list_top").eq(i).css({position:"fixed",top:0});    }    if(bodyTop<=$(".Xc_list").eq(i).offset().top){      $(".Xc_list_top").eq(i).css({position:"static",top:0});    }  } }; window.onload = function () { //判断div.Xc_gg是否存在 if ($(".Xc_gg").length) {   resetRightPanelPostion();    $(window).scroll(function () {       resetRightPanelPostion();    });   } } }) </script>

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

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

帮助

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

(function ($) {     $.fn.extend({       ScrollTable : function(options){           var defaults = {              // SwitchTag : 'tr', //默认表头标签为tr               MaxHeight : 400,               MaxDataItemIndex : 1   //固定前多少列为表头           };           options = $.extend(defaults,options);           return this.each(function(){               var $this = $(this);               //设置表格内容自动换行               $this.css({ "table-layout" : "fixed" });               $this.find('td').css({"word-break":"break-all","word-wrap":"break-word"});                 // 产生表头部分和身体部分               // 复制表格内容               var $newTableHeader = $this.clone();               var $newTableBody = $this.clone();               // 产生表头部分和身体部分,filter()遍历并根据参数做为选择器来筛选。               $newTableHeader.find("tr").filter(function(index){                    return index >= options.MaxDataItemIndex               }).remove();               $newTableBody.find("tr").filter(function(index){                    return index < options.MaxDataItemIndex               }).remove();               //设置单元格边框               $newTableHeader.find("tr").css({"border":"1px blue solid"});               $newTableBody.find("td").css({"border":"1px blue solid"});          // 将产生的表头和身体部分放入Container          $this.after("<div class='ScrollTableContainer' style='border:1px solid;margin:10px 0;'></div>");               $this.next().append("<div class='ScrollHeader'></div>");               //$this.next().append($newTableHeader);               $this.next().append("<div class='ScrollDiv'></div>");               $this.next().css("width", $this.width());               //将表头部分添加到class属性为ScrollHeader的div元素中              $this.next().find("div.ScrollHeader").append($newTableHeader);               $this.next().find("div.ScrollDiv").css({                     "max-height": options.MaxHeight,                     //"margin-top": -2                 });               $this.next().find("div.ScrollDiv").append($newTableBody);               $this.remove();         });       }     }); })(jQuery);

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

帮助

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>     <script src="./jquery.chrometable.js"></script>     <script>         $(function(){             $('table').ScrollTable(); <span style="text-decoration: underline;"><span style="color: #ff0000; text-decoration: underline;">//$(window).scroll(function(){})，当鼠标拖动滚动条时触发一次该函数，如果不这样写,就无法动态地获取bodyTop， //也就是滚动条距离顶部距离的值。但是如果不断地触发ScroolTable()会造成脚本运行错乱。</span></span>             //单独将动态获取bodyTop写成一个函数。             var bodyTop = function(){                 //获取body元素标签                 if ($.browser.safari) {                     bodyelem = $("body");                 }else {                     bodyelem = $("html,body");                 }                 //获取滚动条与body元素顶部的距离                 var bodyTop = bodyelem.scrollTop();                 var num = $(".ScrollTableContainer .ScrollHeader").length;                 //循环遍历class为ScrollTableContainer的div成员，即遍历多个表格table元素中的表头                 for(var i = 0;i<num;i++){                     if(bodyTop >$(".ScrollTableContainer").eq(i).offset().top){                         $(".ScrollHeader").eq(i).css({position:"fixed",top:0,backgroundColor:"red"});                     }                     if(bodyTop <=$(".ScrollTableContainer").eq(i).offset().top){                         $(".ScrollHeader").eq(i).css({position:"static",top:0});                     }                 }             }             $(window).scroll(function () {                 bodyTop();             });         })     </script>

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

帮助

1	(function($){})(jQuery)

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

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

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

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

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