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

作者:a9529lty

如果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('<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> 


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

 

 

 

 

发表评论

2个评论

  • u013047005

    感谢分享

    2017-03-27 13:08:59回复

  • minetdog

    太感谢了.非常赞,用的第二种样式的方式.改动小,且达到效果.3Q!

    2014-05-21 22:35:18回复

我要留言×

技术领域:

我要留言×

留言成功,我们将在审核后加至投票列表中!

提示x

jQuery知识库已成功保存至我的图谱现在你可以用它来管理自己的知识内容了

删除图谱提示×

你保存在该图谱下的知识内容也会被删除,建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗?

删除节点提示×

无法删除该知识节点,因该节点下仍保存有相关知识内容!

删除节点提示×

你确定要删除该知识节点吗?