table表格标题栏置顶特效-幸凡学习网

一、概述：

最近在修改后台效果，大家知道后台使用table的概率很高，数据列表展示都是用它。但是在使用的过程中table第一行标题栏老是会随着滚动条而移动有时候看哪列的数据还要移上去才能看到是哪行。那么就需要第一行的标题置顶了，此效果能够完善的解决这个问题。

当然有些控件已经做到了这些效果。但是比较麻烦使用起来很不方便，所以自己动手做了一个。使用也比较方便。

效果如下：

二、大概思路是：

1、首先利用一个DIV模拟滚动条（给容器设置的高度，这样超出时才有滚动条。并且使用replative相对定位,以便表格使用定位）;
2、模拟一个表格标题头（动态添加），然后用(absolute)定位置顶;
3、并且要将原始表标题栏的每个列宽度获取出来赋给置顶的表格标题栏的每列单元格;
4、基本完成后就是容器的滚动事件了，滚动时模拟的标题头也需要动态修改top。

三、源代码:

本实例使用的是jq1.7.2版本兼容ie8+,ff,chrome,其它未测

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table表格标题栏置顶特效</title>
    <style>
		html, body, div, p, ul,ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td {margin:0;padding:0;font-weight:normal;}
		em,i,cite{font-style:normal;}
		b{font-weight:normal;}		
		body{font-size:12px}
		
		.table_container{height:200px;width:600px;overflow:auto;position:relative;border:1px solid #e6e6e6;margin:20px auto 0;}
		.table_header{position:absolute;left:0;top:0;}		
		.sys_tab{text-align:center;width:100%;}
		.sys_tab tr td input{vertical-align: middle;}
		.sys_tab tr:last-child td{border-bottom:none;}
		.sys_tab tr td:last-child{border-right:none;}
		.sys_tab tr th:last-child{border-right:none;}
		.sys_tab tr th,.sys_tab tr td{border-right:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;}
		.sys_tab tr th{background:#f8f8f8;height:38px;line-height:38px;color:#999;white-space: nowrap;padding:0 10px;}
		.sys_tab tr:hover td{background:#f1fff3;}
		.sys_tab tr td{padding:10px;line-height:20px;word-break: break-all;background:#fff;}
		.sys_tab.nowrap td{white-space:nowrap;}
		.sys_tab td a{color:#249a34;margin:0 5px;}
		.sys_tab td a:hover{color:#fe8625;} 
		.sys_tab td a.cfff{color:#fff}
		.sys_tab td img{width:40px;}
	</style>
</head>
<body>
<div class="table_container">
    <table class="sys_tab table_body" cellpadding="0" cellspacing="0" width="100%">
        <tr><th><input type="checkbox" class="checkall" /></th><th>编号</th><th>商品名称</th><th>图片</th><th>库存</th><th>排序</th><th>商品状态</th><th>商品分类</th><th>操作</th></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
    </table>  
</div>

<div class="table_container">
    <table class="sys_tab table_body nowrap" cellpadding="0" cellspacing="0" width="100%">
        <tr><th><input type="checkbox" class="checkall" /></th><th>编号</th><th>商品名称</th><th>图片</th><th>库存</th><th>排序</th><th>商品状态</th><th>商品分类</th><th>操作</th></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
        <tr><td><input type="checkbox" /></td><td>3819</td><td>熟食品卤味肉类麻辣掌中宝鸡脆骨四川特产休闲小吃零食美食办公室</td><td><img src="http://www.86y.org/upload/images/20151014101903_20101206141944-751722389.jpg" /></td><td>28</td><td>1</td><td>上架</td><td>类型1</td><td><a href="javascript:;">修改</a><a href="javascript:;">删除</a></td></tr>
    </table>  
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
function table_bind(){
	$(".table_container").each(function(){
		var obj=$(this);
		if ($(this).find(".table_header").length == 0)
			$(this).prepend('<table class="sys_tab table_header" cellpadding="0" cellspacing="0" width="100%"><tr>' + $(this).find(".table_body tr").eq(0).html() + '</tr></table>');
		
		$(this).find(".table_body th").each(function (i){
			var wth= $(obj).find(".table_header th").eq(i);
			$(wth).css({ "width": $(this).width()});
		});
		$(this).find(".table_header").css({ "width": $(this).find(".table_body").width()});
	
		$(this).scroll(function () {
			$(this).find(".table_header").css({ "top": $(this).scrollTop()});
		});	
	});
}

$(function(){
	if($(".table_container").length>0)
	{
		table_bind();
		window.onresize=table_bind;
	}	
});
</script>
</body>
</html>

使用说明：几个样式一定要同步，不然会没效果的。

四、结语:

本实例的实现了下拉标题栏置顶，FF有时候会有1px的误差，找不出原因，如果知道的朋友都可以告诉我一声。

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=809【table表格标题栏置顶特效】幸凡学习网