首页
所有分类
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 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 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
NginxConfig(1) 横向滚动(1) 加载异常(1) localStorage(1) SVN(1) Postman(1) ESXI(1) caddy(1) 共享文件夹(1) 骨架屏(1)
You might like
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
smarty简单应用实例
2015/11/03 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
宝塔面板在NGINX环境中TP5.1如何运行？
2021/03/09 PHP
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
js导出txt示例代码
2014/01/14 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
js实现添加删除表格（两种方法）
2017/04/27 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
python opencv之分水岭算法示例
2018/02/24 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
python Scrapy框架原理解析
2021/01/04 Python
NICKIS.com荷兰：设计师儿童时装
2020/01/08 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
医院实习接收函
2014/01/12 职场文书
平安建设实施方案
2014/03/19 职场文书
公司捐款倡议书
2014/05/14 职场文书
中职生求职信
2014/07/01 职场文书
校运动会广播稿300字
2014/10/07 职场文书
人事局接收函
2015/01/30 职场文书
小马王观后感
2015/06/11 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python