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

阿新 • • 發佈：2019-01-23

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

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

基於jquery的固定表頭和列頭的方法

/** * 鎖定表頭和固定列 * 支援IE6+，FF3.6+，Opera9+，Chrome9+ * @param TableID 要鎖定的Table的ID * @param FixColumnNumber 要鎖定列的個數 * @param width 顯示的寬度

[html][jQuery]表頭固定在頂部的一種實現思路

有時候當碰到要顯示很多行又很多列的表格的時候，往往在翻到後面的時候已經對不上某一列是什麼了。所以需要將表頭固定在頂部，而且是在滾動到表頭被遮住的時候，才固定到頂部。先看效果圖再講一下我的實現思路通過一個額外的table來顯示固定

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

如果Table資料過多，頁面必然會拉的很長，固定表頭，可以方便使用者對照表頭專案列表。近日做後臺介面時，整理固定表頭三種方法 A:使用JQuery UI外掛，用DIV替換table，overflow-y:hidden達到滾動，讓 thead絕對定位達到固定的目的，方法如下：

jquery 做表頭固定及列固定，出現4個導航條,解決方法用百分比

很多用jquery做的表頭固定，列固定；當瀏覽器縮小的時候出現4個導航條正文:先看程式碼 var superTable = function (tableId, options) { /////* Initialize */ options = options

jquery 表格固定表頭、列插件

port wrap ren head att wrapper false != 其他原創插件，轉載請聲明出處！！！ PS：此插件並無什麽效率可言（註重效率就不要用了），然後也不支持舊版本瀏覽器（不支持css3 pointer-events屬性的不能用） PS2：相比其他插

DOM遍歷方法（基於jQuery）

get In 篩選 lin bsp 所有 ngs OS ron 在使用$()創建了jQuery對象之後，通過調用下列DOM遍歷方法，可以修改其中匹配的元素，以便將來操作。篩選元素 .filter(selector)

元素上下、左右滾動插件，固定dom結構。基於jQuery，2009年

smo func overflow end 研究 sed quad move perm 1 /** 2 * @classDescription 超級Marquee，可做圖片導航，圖片輪換 3 * @author Aken Li(www.kxbd.com

基於jquery的方法封裝案例

var Common = (function () { var Common = { BindTable: function (table, url, uniqueid, queryid, columns) { $(table

table表頭和首列的表格固定-JQuery、js實現的Table表頭固定

這個是最簡單的方法，基於jQuery的解決方案,引入一個兩個js就可以解決，當然也有使用css， position: sticky，這個我下一章節會講它的優缺點，當然為了凸顯jQuery的優點，我就說話使用css的缺點： 1.固定表頭，和首列需要額外

JQuery實現的Table表頭固定展示效果

線上演示1 線上演示2 線上演示3 本地下載大家可能經常需要展示資料或者報表，表頭如果滾動上去後，檢視資料的類別和欄位是個麻煩事情，在這裡我們推薦來自tympanus的一個JS實現的 table表頭固定效果，相信大家肯定會受益的，這個demo使用了jQuery來實現，所以能夠很好的支援各種瀏覽器上的報

jqgrid表頭合併和行合併，基於jquery指令碼外掛

下面的js是近期寫的一個jqgrid表頭與行合併指令碼。jqgrid也真是，表頭合併的功能都不提供，用起來好尷尬。使用方法：在jqgrid的loadComplete或者gridComplete事件中使用。程式碼不是最優化的，希望大家一起改進它。謝謝 /* * jQ

HTML table表頭固定（自己做專案使用的幾種方法）

還記得之前公司需要做表頭固定，但是由於基礎太差，去查了好多好多文件。最後總結出幾個不錯的方法和外掛。一、使用css + js來實現表頭固定使用css定位th 根據父級滾動條scrolltop的偏移量獲取值，在用js把偏移量賦值到th的定位top上。就做

Asp.net基於session實現購物車的方法

lai 程序 clas contain ext info border mode man 本文實例講述了asp.net基於session實現購物車的方法。分享給大家供大家參考，具體如下： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1

8款基於Jquery的WEB前端動畫特效

jelly 光立方日歷 down 方便技術分享多級下拉菜單時也 ont 1.超炫酷的30個jQuery按鈕懸停動畫按鈕插件是最常見的jQuery插件之一，因為它用途廣泛，而且配置起來最為方便。今天我們要分享的是30個超炫酷的jQuery懸停按鈕動畫，當我們將鼠標滑

基於JQuery實現表單元素值的回寫

spl sel || etc oos min javascrip odi tar form.jsp: <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <!DO

jQuery 遍歷 - eq() 方法

集合 text nbsp 指示 clas src css doc 如果 <!DOCTYPE html> <html> <head> <style> div { width:60px; height:60px; mar

bug統計分析續（一）基於SQL的Bug統計方法

擴展 span tom div info 依據 desc pos title 本文由 @lonelyrains 出品。轉載請註明出處。文章鏈接： http://blog.csdn.net/lonelyrains/article/details/44225533

Jquery插件使用方法

alt nsh 傳參學習 col onf 立即執行 dom dcl 在實際開發工作中，總會碰到像滾動，分頁，日歷等展示效果的業務需求，對於接觸過jQuery以及熟悉jQuery使用的人來說，首先想到的肯定是尋找現有的jQuery插件來滿足相應的展示需求。目前頁面中常用的一

JQuery中ajax使用方法

ces 使用驗證 validate pos 簡單方法 valid d+ AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。相比於原生AJAX五個步

centos設置固定IP方法

sco mask root 網絡 uuid 保存 ping通 ipv6 tar 首先網絡模式設為橋接 [[email protected]/* */ ~]# vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=

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

相關推薦