首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 27, 2011

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> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox" value="checkbox"> 
a</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox2" value="checkbox"> 
b</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td nowrap class="scrollRowThead" > 
<input type="checkbox" name="checkbox3" value="checkbox"> 
c</td> 
<td nowrap>单元格2</td> 
<td nowrap>单元格3</td> 
<td nowrap>单元格4</td> 
<td nowrap>单元格5</td> 
<td nowrap>单元格6</td> 
<td nowrap>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td class="scrollRowThead" > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</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"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<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> 
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function OnResize() { 
$(".mainer").height($(window).height() - 40); 
} 
$(function () { 
onreszie(); 
}); 
</script> 
</head> 
<body onResize="OnResize()"> 
<div class="header"> 
<table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable"> 
<thead> 
<tr > 
<th > </th> 
<th colspan="2">列头</th> 
<th colspan="2">列头</th> 
<th colspan="2">列头</th> 
</tr> 
<tr > 
<th >h1</th> 
<th >h2</th> 
<th >h3</th> 
<th >h4</th> 
<th >h5</th> 
<th >h6</th> 
<th >h7</th> 
</tr> 
</thead> 
</table> 
</div> 
<div class="mainer"> 
<table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable"> 
<tbody> 
<tr> 
<td > 
<input type="checkbox" name="checkbox" value="checkbox"> 
a</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox2" value="checkbox"> 
b</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td nowrap > 
<input type="checkbox" name="checkbox3" value="checkbox"> 
c</td> 
<td nowrap>单元格2</td> 
<td nowrap>单元格3</td> 
<td nowrap>单元格4</td> 
<td nowrap>单元格5</td> 
<td nowrap>单元格6</td> 
<td nowrap>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox" value="checkbox"> 
a</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox2" value="checkbox"> 
b</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td nowrap > 
<input type="checkbox" name="checkbox3" value="checkbox"> 
c</td> 
<td nowrap>单元格2</td> 
<td nowrap>单元格3</td> 
<td nowrap>单元格4</td> 
<td nowrap>单元格5</td> 
<td nowrap>单元格6</td> 
<td nowrap>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox4" value="checkbox"> 
d</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox5" value="checkbox"> 
e</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox6" value="checkbox"> 
f</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
<tr> 
<td > 
<input type="checkbox" name="checkbox7" value="checkbox"> 
g</td> 
<td>单元格2</td> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
</tr> 
</tbody> 
</table> 
</div> 
</body> 
</html>

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery easyui的tabs使用时的问题
Mar 23 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
js图片预加载示例
Apr 30 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
微信小程序 高德地图SDK详解及简单实例（源码下载）
Jan 11 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
jquery animate图片模向滑动示例代码
Jan 26 #Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 #Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 #Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 #Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 #Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 #Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 #Javascript
检举信(8) 竞聘书(31) 承诺书(369) 委托书(259) 意向书(73) 说明书(38) 聘任书(31) 担保书(46) 公证书(45) 协议书(568)
You might like
一些常用的php函数
2006/12/06 PHP
PHP中的extract的作用分析
2008/04/09 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
JavaScript函数详解
2015/02/27 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
js常用DOM方法详解
2017/02/04 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
使用Python对Excel进行读写操作
2017/03/30 Python
速记Python布尔值
2017/11/09 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
Clos19英国：高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
教师学习培训邀请函
2014/02/04 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
县级文明单位申报材料
2014/05/23 职场文书
公务员年度个人总结
2015/02/12 职场文书
行政前台岗位职责
2015/04/16 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers