基于jquery的表头固定的若干方法_jquery 表头固定-CSDN博客

本文链接：https://blog.csdn.net/hfrujhv/article/details/83888550

本文介绍了使用jQuery实现表头固定效果的三种方法，包括jQuery UI插件、CSS滤镜（仅IE兼容）和双表结构配合overflow属性。详细讲解了每种方法的实现思路和DOM结构，适合需要在长表格中保持表头可见的网页设计。

摘要由CSDN通过智能技术生成

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

如果Table数据过多，页面必然会拉的很长，固定表头，可以方便用户对照表头项目列表。近日做后台界面时，整理固定表头三种方法

A:使用JQuery UI插件，用DIV替换table，overflow-y:hidden达到滚动，让 thead绝对定位达到固定的目的，方法如下：

(function($){ $.chromatable = { defaults: { width: "900px", height: "300px", scrolling: "yes" } }; $.fn.chromatable = function(options){ var options = $.extend({}, $.chromatable.defaults, options); return this.each(function(){ var $this = $(this); var $uniqueID = $(this).attr("ID") + ("wrapper"); $(this).css('width', options.width).addClass("_scrolling"); $(this).wrap('<div class="scrolling_outer"><div id="'+$uniqueID+'" class="scrolling_inner"></div></div>'); $(".scrolling_outer").css({
   'position':'relative'}); $("#"+$uniqueID).css( {
   'border':'1px solid #CCCCCC', 'overflow-x':'hidden', 'overflow-y':'auto', 'padding-right':'17px' }); $("#"+$uniqueID).css('height', options.height); $("#"+$uniqueID).css('width', options.width); $(this).before($(this).clone().attr("id", "").addClass("_thead").css( {
   'width' : 'auto', 'display' : 'block', 'position':'absolute', 'border':'none', 'border-bottom':'1px solid #CCC', 'top':'1px' })); $('._thead').children('tbody').remove(); $(this).each(function( $this ){ if (options.width == "100%" || options.width == "auto") { $("#"+$uniqueID).css({
   'padding-right':'0px'}); } if (options.scrolling == "no") { $("#"+$uniqueID).before('<a href="#" class="expander" style="width:100%;">Expand table</a>'); $("#"+$uniqueID).css({
   'padding-right':'0px'}); $(".expander").each( function(int){ $(this).attr("ID", int); $( this ).bind ("click",function(){ $("#"+$uniqueID).css({
   'height':'auto'}); $("#"+$uniqueID+" ._thead").remove(); $(this).remove(); }); }); $("#"+$uniqueID).resizable({ handles: 's' }).css("overflow-y", "hidden"); } }); $curr = $this.prev(); $("thead:eq(0)>tr th",this).each( function (i) { $("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width()); }); if (options.width == "100%" || "auto"){ $(window).resize(function(){ resizer($this); }); } }); }; function resizer($this) { $curr = $this.prev(); $("thead:eq(0)>tr th", $this).each( function (i) { $("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width()); }); }; })(jQuery);

页面调用如下：

... <script type="text/javascript" src="jquery-ui-min.js"></script> <script> $(function(){ $("#yourTableID").chromatable({ width: "900px", height: "400px", scrolling: "yes" }); }); </script> ... <table id="yourTableID" width="100%" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th>Check out this header</th> <th>Look here's another one</th> <th>Wow, look at me!</th> </tr> </thead> <tbody> <tr> <td>Some content goes in here</td> <td>Praesent vitae ligula nec orci pretium vestibulum</td> <td>Maecenas tempus dictum libero</td> </tr> ... <tr> <td>Quisque in wisi quis orci tincidunt fermentum</td> <td>Mauris aliquet mattis metus</td> <td>Etiam eu ante non leo egestas nonummy</td> </tr> </tbody> </table>

此方法IE和FF的兼容性都很好，推荐。
B：利用css滤镜实现，但FF不支持微软的东西，不兼容。DOM如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <style type="text/css"> <!-- body,table, td, a {
    font:9pt;} /*重点：固定行头样式*/ .scrollRowThead{
    position: relative; left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft); z-index:0;} /*重点：固定表头样式*/ .scrollColThead {
    position: relative;top: expression(this.parentElement.parentElement.parentElement.scrollTop);z-index:2; height:20px;} /*行列交叉的地方*/ .scrollCR { z-index:3;} /*div外框*/ .scrollDiv {
    height:200px;clear: both; border: 1px solid #EEEEEE;OVERFLOW: scroll;width: 500px; } /*行头居中*/ .scrollColThead td,.scrollColThead th { text-align: center ;} /*行头列头背景*/ .scrollRowThead,.scrollColThead td,.scrollColThead th {
    background-color:EEEEEE; height:20px;} /*表格的线*/ .scrolltable{ border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; } /*单元格的线等*/ .scrolltable td,.scrollTable th{ border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; padding: 5px; } --> </style> <BODY> <!--<div class="scrollDiv" id="scrollDiv">--> <table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable"> <tr class="scrollColThead" > <th class="scrollRowThead scrollCR" > </th> <th colspan="2">列头</th> <th colspan="2">列头</th> <th colspan="2">列头</th> </tr> <tr class="scrollColThead" > <th class="scrollRowThead scrollCR" >h1</th> <th class="scrollRowThead scrollCR">h2</th> <th class="scrollRowThead scrollCR">h3</th> <th class="scrollRowThead scrollCR">h4</th> <th class="scrollRowThead scrollCR">h5</th> <th class="scrollRowThead scrollCR">h6</th> <th class="scrollRowThead scrollCR">h7</th> </tr> <tr>