[代码收集]JQuery固定表头不滚动让内容滚动的表格代码(可用于友链) - 笑忘书网页代码收藏馆

首页-代码 2013-11-29 19:31:03 -0500

★JQuery固定表头不滚动让内容滚动的表格代码(可用于友链)★

请勿抄袭本页面

代码说明

使用jquery的表格特效，控制表格的表头固定而不滚动，当用户拖动表格滚动条的时候，表格的每行内容是滚动的，表头并不会滚动，这样可始终让表格的表头与内容相对应，方便查看表格中的内容，对一个表格来说，我想这样的效果是非常实用哦。转自源码爱好者

html代码

$("#"+$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);
$(document).ready(function(){
$("#yourTableID").chromatable({
		width: "100%",
		height: "400px",
		scrolling: "no" 
	});
$("#yourTableID2").chromatable({
		width: "100%",
		height: "400px",
		scrolling: "yes"
	});	
});
</script>
<table id="yourTableID2" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
	<tr>
		<th width="45%">磨名</th>
		<th>昵称</th>
		<th>ID</th>
	</tr>
</thead>
<tbody>	
	<tr>
		<td>笑忘书网盘</td>
		<td>笑忘书</td>
		<td>35230</td>
	</tr>
	<tr>
		 	<td>笑忘书网盘</td>
		<td>笑忘书</td>
		<td>35230</td> 
	</tr>
	<tr>
		 	<td>笑忘书网盘</td>
		<td>笑忘书</td>
		<td>35230</td> 
	</tr>
	<tr>
 	<td>笑忘书网盘</td>
		<td>笑忘书</td>
		<td>35230</td> 
	</tr>
	<tr>
	 	<td>笑忘书网盘</td>
		<td>笑忘书</td>
		<td>35230</td> 
	</tr>
	<tr>
	 	<td>笑忘书网盘</td>
		<td>笑忘书</td>
		<td>35230</td> 
	</tr>
	<tr>
	 	<td>笑忘书网盘</td>
		<td>笑忘书</td>
		<td>35230</td> 
	</tr>
	<tr>
	 	<td>飞雪收藏站</td>
		<td>飞雪</td>
		<td>feixue</td> 
	</tr>
	<tr>
 	<td>笑忘书网盘</td>
		<td>笑忘书</td>
		<td>35230</td> 
	</tr>
	<tr>
		 	<td>Chen's Website</td>
		<td>chen</td>
		<td>chen</td> 
	</tr>
	<tr>
		 	<td>笑忘书网盘</td>
		<td>笑忘书</td>
		<td>35230</td> 
	</tr>
</tbody>	
</table>

grippie.png (0.11 KiB) | Meta

jquery-1.6.2.min.js (89.41 KiB) | Read | Meta | +

jquery-ui-1.8.20.min.js (197.71 KiB) | Meta

代码演示

按住表格向下拖动试试

磨名	昵称	ID
笑忘书网盘	笑忘书	35230
笑忘书网盘	笑忘书	35230
笑忘书网盘	笑忘书	35230
笑忘书网盘	笑忘书	35230
笑忘书网盘	笑忘书	35230
笑忘书网盘	笑忘书	35230
笑忘书网盘	笑忘书	35230
飞雪收藏站	飞雪	feixue
笑忘书网盘	笑忘书	35230
Chen's Website	chen	chen
笑忘书网盘	笑忘书	35230

[代码仅供参考，转载请注明出处]

----Comments(2)----
Sao Year (@hebin0925) | @ at 2013-11-30 11:59:
不错。

小孩 (@luchaorong) | @ at 2013-11-29 19:35:
过路

Subscribe | Register | Login | N