头部固定的响应式jQuery表格插件

jquery.fixme是一款头部固定的响应式jQuery表格插件。该表格通过jQuery来构造固定的表格头效果，在页面向下滚动时，表格头固定在页面的顶部。

使用方法

HTML结构

该表格的HTML结构使用标准的HTML表格的结构：

<table class="blue">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
    ......
  </tbody>
</table>                  
                

CSS样式

该表格所需的样式非常简单，它提供了2中颜色主题：蓝色和紫色。

.container{
  width:90%;
  margin:auto;
}

table{
  border-collapse:collapse;
  width:100%;
}

.blue{
  border:2px solid #1ABC9C;
}

.blue thead{
  background:#1ABC9C;
}

.purple{
  border:2px solid #9B59B6;
}

.purple thead{
  background:#9B59B6;
}                  
                

通过nth-child为表格偶数行设置斑马线效果。

tbody tr:nth-child(even){
  background:#ECF0F1;
}                  
                

鼠标滑过表格时修改表格行的背景色和文字颜色。

tbody tr:hover{
background:#BDC3C7;
  color:#FFFFFF;
}               
                

.fixed类用于固定表格头，定位方式使用固定定位，开始是是不可见的。

.fixed{
  top:0;
  position:fixed;
  width:auto;
  display:none;
  border:none;
}              
                

JavaScript

在Js代码中，通过$.fn.fixMe构造了一个简单的表格头部固定插件。该插件中有3个方法：初始化方法init()，头部尺寸修改方法resizeFixed()和头部滚动固定方法scrollFixed()。然后以参数的形式将后两个方法分别传入window对象的resize()和scroll()方法中。

;(function($) {
   $.fn.fixMe = function() {
      return this.each(function() {
         var $this = $(this),
            $t_fixed;
         function init() {
            $this.wrap('<div class="container" />');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
         }
         function resizeFixed() {
            $t_fixed.find("th").each(function(index) {
               $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
            });
         }
         function scrollFixed() {
            var offset = $(this).scrollTop(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
            if(offset < tableOffsetTop || offset > tableOffsetBottom)
               $t_fixed.hide();
            else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
               $t_fixed.show();
         }
         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);
         init();
      });
   };
})(jQuery);                 
                

最后在页面DOM元素加载完毕之后，通过fixMe()方法来初始化插件。

$(document).ready(function(){
      $("table").fixMe();
});                  
                

jquery.fixme固定表格头插件的github地址为：https://github.com/ispot-tv/jquery.fixme