1. 程式人生 > >基於jquery的表頭固定的若干方法

基於jquery的表頭固定的若干方法

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


有時候最笨的方法也可能是最簡單最好的方法,這樣寫的相容性絕對安全,靈活性也不錯。