首页
所有分类
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 相关文章推荐
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
Vue.js学习示例分享
Feb 05 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
JS实现图片切换特效
Dec 23 Javascript
如何在JavaScript中创建具有多个空格的字符串？
Feb 23 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
translation(2) 数据保存(1) 查找算法(1) decorator(1) 装饰器(1) 读取(1) 矩阵(1) 网页解析(1) bs4(1) 数组(5)
You might like
初学CAKEPHP 基础教程
2009/11/02 PHP
php数字游戏 计算24算法
2012/06/10 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
Python深入学习之闭包
2014/08/31 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
Python 在函数上添加包装器
2020/07/28 Python
如何利用python发送邮件
2020/09/26 Python
2013年学期结束动员演讲稿
2014/01/07 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
上下班时间调整通知
2015/04/23 职场文书
军事博物馆观后感
2015/06/05 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
关于社会实践的心得体会（2016最新版）
2016/01/25 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
日本官方排名前10的动漫，名侦探柯南上榜，第一是一部创造历史的动漫
2022/03/18 日漫
处理canvas绘制图片模糊问题
2022/05/11 Javascript