站长百科 基于jquery的表头固定的若干方法 正文

基于jquery的表头固定的若干方法

2022-01-13,,,,

如果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('');
$(".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('Expand table');
$("#"+$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);

页面调用如下：
复制代码 代码如下:
...

...

...

Check out this header Look here's another one Wow, look at me!
Some content goes in here Praesent vitae ligula nec orci pretium vestibulum Maecenas tempus dictum libero
Quisque in wisi quis orci tincidunt fermentum Mauris aliquet mattis metus Etiam eu ante non leo egestas nonummy

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

New Document

<!--
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; }
-->

列头 列头 列头
h1 h2 h3 h4 h5 h6 h7

a

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

b

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

c

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

C:最简单的方法当然是写2个table，用DIV的overflow-y:auto来实现，兼容性绝对没问题，麻烦之处在于2个table的对齐问题，另外用脚本赋予高度的话，需要加onresize()方法。DOM如下：
复制代码 代码如下:

无标题文档

*,body,form,ul,li,p,h1,h2,h3,h4,h5,h6 {margin:0px;padding:0px;}
body, td, th, input, select,p,span{font-family:"微软雅黑",Arial, Helvetica, sans-serif;}
body,td,div{font-size:12px;color:#333; line-height:150%;-webkit-text-size-adjust:none;}
select{ font-size:12px;}
a {blr:expression(this.onFocus=this.blur()); font-family:"微软雅黑",Arial, Helvetica, sans-serif; font-size:12px; }
a:link, a:visited {text-decoration:none;color:#333;}
a:hover, a:active {text-decoration:underline;color:#F00;}
ul,li,ol{list-style-type:none;}img {border:none;}
html{ overflow:hidden;}
.header{ width:1000px; margin:auto; height:40px; background:#ccc;}
.mainer{ width:1000px; margin:auto; height:auto; overflow-y:scroll;overflow-x:hidden;}

列头 列头 列头
h1 h2 h3 h4 h5 h6 h7

a

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

b

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

c

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

a

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

b

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

c

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

d

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

e

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

f

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

g

 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7

有时候最笨的方法也可能是最简单最好的方法，这样写的兼容性绝对安全，灵活性也不错。

以上就是基于jquery的表头固定的若干方法的详细内容，更多请关注本站其它相关文章！

《基于jquery的表头固定的若干方法.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!