JQuery固定表头插件fixedtableheader源码注释

　　

　　在开发XX车站信息系统时，需要将大量数据显示在一个巨大的表格内部，由于表格是一个整体，无法分页，加之数据很多，超出一屏，为了方便用户，决定使用固定表头的插件，经过测试，发现JQuery 插件：fixedtableheader可以简单方便的实现功能。

它的使用很简单，需要设置的参数也只需2个，很实用。

　　使用方法：

//引入文件
<script type="mce-text/javascript" src="http://i.cnblogs.com/jquery.min.js"></script>
<script type="mce-text/javascript" src="http://i.cnblogs.com/jquery.fixedtableheader.min.js"><
//绑定表格,headerrowsize 后面的参数是绑定需要固定的表头的行数
<script type="mce-text/javascript">
$(document).ready(function() {
   $('.tbl').fixedtableheader({
   　　highlightrow: true, headerrowsize: 4
   });
});
</script>

　　使用时，我发现js文件只有 4KB，我很好奇它是怎么实现的，于是就有了下文。

　　大致原理是：创建一个绝对定位的table，只包含表头。当表格被用户拖动超出屏幕时，表头表格显示；表格正常显示时，表头表格隐藏。

/* Copyright (c) 2009 Mustafa OZCAN (http://www.mustafaozcan.net)
   * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
   * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
   * Version: .0.2
   * Requires: jquery.1.3+
   */
  jQuery.fn.fixedtableheader = function(options) {
      var settings = jQuery.extend({            //jQuery.extend( target [, object1 ] [, objectN ] )
          headerrowsize: 1,                    //这是默认参数
         highlightrow: false,               
         highlightclass: "highlight"           
     },
     options);                                //用户设置的参数
                                             //如果用户设置参数，会覆盖对应的默认参数
     this.each(function(i) {                    //处理每个table（该插件使用class属性绑定，会存在多个table）
         var $tbl = $(this);
         var $tblhfixed = $tbl.find("tr:lt(" + settings.headerrowsize + ")");    //找到要固定表头tr
         var headerelement = "th";
         if ($tblhfixed.find(headerelement).length == 0) headerelement = "td";    //没有th，默认td为表头单元格
         if ($tblhfixed.find(headerelement).length > 0) {                        //有th单元格
             $tblhfixed.find(headerelement).each(function() {           
                 $(this).css("width", $(this).width());                //设置表头th宽度
             });
             var $clonedTable = $tbl.clone().empty();                //创建表头表格，即一对完整的table标签
             var tblwidth = GetTblWidth($tbl);
             $clonedTable.attr("id", "fixedtableheader" + i).css({    //设置悬浮表头绝对定位的位置
                 "position": "fixed",                               
                 "top": "0",
                 "left": $tbl.offset().left                            //.offset(): 获取表格的左边距
             }).append($tblhfixed.clone()).width(tblwidth).hide().appendTo($("body"));    //将表头插入table标签中
             if (settings.highlightrow)                                                    //鼠标移过高亮
                 $("tr:gt(" + (settings.headerrowsize - 1) + ")", $tbl).hover(function() {
                     $(this).addClass(settings.highlightclass);
                 },
                 function() {
                     $(this).removeClass(settings.highlightclass);
             });
             $(window).scroll(function() {                            //当滚动条发生变化时触发scroll事件                   
                 if (jQuery.browser.msie && jQuery.browser.version == "6.0") 		//IE6.0
　　　　			$clonedTable.css({								  //
                     "position": "absolute",
                     "top": $(window).scrollTop(),
                     "left": $tbl.offset().left
                 });
                 else $clonedTable.css({
                     "position": "fixed",
                     "top": "0",
                     "left": $tbl.offset().left - $(window).scrollLeft()
                 })
                 var sctop = $(window).scrollTop();		//页面滚动条向下滚动的高度，也即页面被隐藏的高度
                 var elmtop = $tblhfixed.offset().top;	//此时原始表格距离浏览器客户区顶端的高度
                 if (sctop > elmtop && sctop <= (elmtop + $tbl.height() - $tblhfixed.height()))
					$clonedTable.show();			//原来的表头被滚动的不可见并且表格主体尚未被滚动出屏幕
                 else
					$clonedTable.hide();			//
             });
             $(window).resize(function() {
                 if ($clonedTable.outerWidth() != $tbl.outerWidth()) {		//若悬浮表跟不上resize的变化
                     $tblhfixed.find(headerelement).each(function(index) {	//重新设置悬浮表头clonedTable每个th/td的宽度
                         var w = $(this).width();
                         $(this).css("width", w);
                         $clonedTable.find(headerelement).eq(index).css("width", w);
                     });
                     $clonedTable.width($tbl.outerWidth());					//设置悬浮表的宽度，注意这里.width()和css('width')的区别
                 }
                 $clonedTable.css("left", $tbl.offset().left);				//jquery中offset是相对于浏览器客户区的相对偏移
             });
         }
     });
     function GetTblWidth($tbl) {		//获取元素宽度（包括padding和border）
         var tblwidth = $tbl.outerWidth();
         return tblwidth;
     }
 };

在注释该代码过程中，一个很严重的疑惑产生了：

JQuery的.width() 和 CSS width 貌似不统一，有很大区别！所以又细细深入研究了一番，收获详见这里。

IE6不能使用position:fixed，具体见这里。

后记：2014-06-17

其实这个根本就达不到所谓的“fixtableheader”的效果，因为它只是简单的额把所有的表头都固定在了浏览器客户区的顶部，而非是table所在区域的顶部。

请看这个演示错误的Demo