基于jquery的表头固定的若干方法_Javascript教程-查字典教程网

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><div id="'+$uniqueID+'"></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="#">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);

页面调用如下：

复制代码代码如下:

...

$(function(){

$("#yourTableID").chromatable({

width: "900px",

height: "400px",

scrolling: "yes"

});

</script>

...

<thead>

<tr>

<th>Check out this header</th>

<th>Look here's another one</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>

<BODY>

<tr >

</tr>

<tr >

</tr>

<tr>

<td >

a</td>

</tr>

<tr>

<td >

b</td>

</tr>

<tr>

c</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

</table>

</BODY>

</HTML>

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

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<style>

*,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;}

</style>

function OnResize() {

$(".mainer").height($(window).height() - 40);

}

$(function () {

onreszie();

});

</script>

</head>

<div>

<thead>

<tr >

</tr>

<tr >

</tr>

</thead>

</table>

</div>

<div>

<tbody>

<tr>

<td >

a</td>

</tr>

<tr>

<td >

b</td>

</tr>

<tr>

c</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

a</td>

</tr>

<tr>

<td >

b</td>

</tr>

<tr>

c</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

<tr>

<td >

d</td>

</tr>

<tr>

<td >

e</td>

</tr>

<tr>

<td >

f</td>

</tr>

<tr>

<td >

g</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

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