热门:网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置:.Net中文社区>> AJAX编程>>正文内容

jQuery实现冻结表头(兼容所有浏览器)【附源码下载】

发布时间:2010年07月06日点击数: 佚名

这段时间做项目时候由于需要显示一个列表,但是由于数据太多在滚动的时候表头必须冻结住,所以就写了下面这个脚本(曾经在网上也找过相应的脚本,但是不怎么理想所以就自己写了,但是目前由于项目仅仅用到了表头的冻结,而不需要指定列冻结所以目前只能算个不完整的脚本,不过一般的仅仅需要表头冻结就可以使用了),现在先看看截图:

这样实现了表头的冻结,下面表体内容可以自由滚动【完整示例源码下载
看下代码:

  1. //为jquery扩展一个CloneTableHeader 方法 
  2. jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) { 
  3.     //获取冻结表头所在的DIV,如果DIV已存在则移除 
  4.     var obj = document.getElementById("tableHeaderDiv" + tableId); 
  5.     if (obj) { 
  6.          jQuery(obj).remove(); 
  7.     }  
  8.     var browserName = navigator.appName;//获取浏览器信息,用于后面代码区分浏览器 
  9.     var ver = navigator.appVersion; 
  10.     var browserVersion = parseFloat(ver.substring(ver.indexOf("MSIE") + 5, ver.lastIndexOf("Windows"))); 
  11.     var content = document.getElementById(tableParentDivId); 
  12.     var scrollWidth = content.offsetWidth - content.clientWidth; 
  13.  
  14.     var tableOrg = jQuery("#" + tableId);//获取表内容 
  15.     var table = tableOrg.clone();//克隆表内容 
  16.     table.attr("id""cloneTable"); 
  17.     //注意:需要将要冻结的表头放入thead中  
  18.     var tableHeader = jQuery(tableOrg).find("thead"); 
  19.     var tableHeaderHeight = tableHeader.height(); 
  20.     tableHeader.hide(); 
  21.     var colsWidths = jQuery(tableOrg).find("tbody tr:first td").map(function() { 
  22.         return jQuery(this).width(); 
  23.     });//动态获取每一列的宽度 
  24.     var tableCloneCols = jQuery(table).find("thead tr:first td"
  25.     if (colsWidths.size() > 0) {//根据浏览器为冻结的表头宽度赋值(主要是区分IE8) 
  26.         for (i = 0; i < tableCloneCols.size(); i++) { 
  27.             if (i == tableCloneCols.size() - 1) { 
  28.                 if (browserVersion == 8.0) 
  29.                     tableCloneCols.eq(i).width(colsWidths[i] + scrollWidth); 
  30.                 else 
  31.                     tableCloneCols.eq(i).width(colsWidths[i]); 
  32.             } else { 
  33.                 tableCloneCols.eq(i).width(colsWidths[i]); 
  34.             } 
  35.         } 
  36.     } 
  37.     //创建冻结表头的DIV容器,并设置属性 
  38.     var headerDiv = document.createElement("div"); 
  39.     headerDiv.appendChild(table[0]); 
  40.     jQuery(headerDiv).css("height", tableHeaderHeight); 
  41.     jQuery(headerDiv).css("overflow""hidden"); 
  42.     jQuery(headerDiv).css("z-index""20"); 
  43.     jQuery(headerDiv).css("width""100%"); 
  44.     jQuery(headerDiv).attr("id""tableHeaderDiv" + tableId); 
  45.     jQuery(headerDiv).insertBefore(tableOrg.parent()); 

以上就是完整代码,现在看下如何使用:
只需在页面中加入以下脚本

  1. <script type="text/javascript"
  2.        jQuery(function() { 
  3.            jQuery.fn.CloneTableHeader("tab1""div1"); 
  4.        }); 
  5.    </script> 

这样就可以了,传入表和表所在的DIV的ID就OK了,必须注意的是:要冻结的表头必须放入到thead中,否则无法实现冻结。

本站热点业务

更多模板/案例展示

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作