`
cqh520llr
  • 浏览: 509977 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

JS表格头部固定-转

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0062)http://www.zhudongdong.cn/wp-content/uploads/2012/11/demo.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">

<title>固定表头——一然博客  www.zhudongdong.cn</title>
<style>
body{ overflow:hidden;}/*让body不出现滚动条*/
table {
    background-color: #FFFFFF;
    border-collapse: collapse;
    border-left: 1px solid #000;
    border-spacing: 1px;
    border-top: 1px solid #000;
    margin: 0;
	width:2000px;/*整个表格宽度，可以不填，不填默认100%;*/
}
.pp-list {
    background: none repeat scroll 0 0 #8F8F9A;
    border-spacing: 1px;
    margin: 0;
    overflow: hidden;
}
.pp-list td, .pp-list th {
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    text-align: center;
}
.t_table {
    overflow: auto;/*让内容表格外面的div自动有滚动条*/
	max-height: 353px;
}
</style>
</head>
<body>

<table class="pp-list" id="table_head">
<thead>
		<tr>
			<th class="ckTh" style="width: 20px;"><input type="checkbox"></th>
			<th width="55" style="width: 104px;"><span column="serialId" class="trade-sort">工单流水</span></th>
			<th width="55" style="width: 131px;"><span column="status" class="trade-sort">订单状态</span></th>
			<th width="50" style="width: 38px;">收货人</th>
			<th style="width: 401px;">收货地址</th>
			<th style="width: 96px;">联系电话</th>
			<th style="width: 539px;">买家留言</th>
			<th style="width: 424px;">卖家留言</th>
			<th width="90" style="width: 108px;"><span column="sellTime" class="trade-sort">拍单日期</span></th>
			<th width="90" style="width: 108px;"><span column="payTime" class="trade-sort">付款时间</span></th>
		</tr>
</thead>
</table>

<div class="t_table">
<table class="pp-list">
		<tbody>
		<tr style="display: none; background: none repeat scroll 0% 0% rgb(255, 255, 255);" id="tradesHeader"></tr>
		
			
			
			<tr onclick="findTrade(1)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
			
				
				<td class="ckTd"><input type="checkbox" value="1" name="tradeCheckBox"></td>
				<td>10112062753**</td>
				<td>成功&nbsp;</td>  
				<td>杨*&nbsp; </td>
				<td>福建省&nbsp;  
					厦门市&nbsp; 
					思明区&nbsp;
					厦门大学学生公寓**&nbsp;</td>
				<td>15260******&nbsp;</td>   
				<td>&nbsp;</td>    
				<td>&nbsp;</td>
				<td>12-06-24 13:37</td>
				<td>12-06-24 13:37</td> 
				<td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>
			</tr>
		
			
			
			<tr onclick="findTrade(2)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
			
				
				<td class="ckTd"><input type="checkbox" value="2" name="tradeCheckBox"></td>
				<td>10112062753**</td>
				<td>等待用户确认收货&nbsp;</td>  
				<td>孔**&nbsp; </td>
				<td>四川省&nbsp;  
					成都市&nbsp; 
					温江区&nbsp;
					文化路251号观澜半岛*******&nbsp;</td>
				<td>13880******&nbsp;</td>   
				<td>&nbsp;</td>    
				<td>&nbsp;</td>
				<td>12-06-25 21:56</td>
				<td>12-06-25 21:57</td> 
				<td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>
			</tr>
		
			
			
			<tr onclick="findTrade(3)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
			
				
				<td class="ckTd"><input type="checkbox" value="3" name="tradeCheckBox"></td>
				<td>10112062753**</td>
				<td>成功&nbsp;</td>  
				<td>刘*&nbsp; </td>
				<td>山东省&nbsp;  
					潍坊市&nbsp; 
					奎文区&nbsp;
					玉清街北海路交叉口********&nbsp;</td>
				<td>15094******&nbsp;</td>   
				<td>&nbsp;</td>    
				<td>&nbsp;</td>
				<td>12-06-23 18:11</td>
				<td>12-06-23 18:12</td> 
				<td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>
			</tr>
		
			
			<tr class="red_class" onclick="findTrade(4)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
			
			
				
				<td class="ckTd"><input type="checkbox" value="4" name="tradeCheckBox"></td>
				<td>10112062753**</td>
				<td>发货处理中&nbsp;</td>  
				<td>马**&nbsp; </td>
				<td>江苏&nbsp;  
					无锡&nbsp; 
					宜兴市&nbsp;
					宜兴市宜城街道东山西路********&nbsp;</td>
				<td>&nbsp;</td>   
				<td>我要一件粉色，一件米色，一件白色&nbsp;</td>    
				<td>&nbsp;</td>
				<td>12-06-27 08:27</td>
				<td>12-06-27 08:29</td> 
				<td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>
			</tr>
		
			
			<tr class="red_class" onclick="findTrade(5)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
			
			
				
				<td class="ckTd"><input type="checkbox" value="5" name="tradeCheckBox"></td>
				<td>10112062753**</td>
				<td>成功&nbsp;</td>  
				<td>李**&nbsp; </td>
				<td>北京&nbsp;  
					北京市&nbsp; 
					海淀区&nbsp;
					北京海淀区太平路*****—1—801&nbsp;</td>
				<td>18210******&nbsp;</td>   
				<td>&nbsp;</td>    
				<td>买三送一 每个颜色发一件 路丸   6.18&nbsp;</td>
				<td>12-06-18 20:19</td>
				<td>12-06-19 09:41</td> 
				<td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>
			</tr>
		
			
			
			<tr onclick="findTrade(6)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
			
				
				<td class="ckTd"><input type="checkbox" value="6" name="tradeCheckBox"></td>
				<td>10112062753**</td>
				<td>成功&nbsp;</td>  
				<td>谢**&nbsp; </td>
				<td>湖南省&nbsp;  
					益阳市&nbsp; 
					南县&nbsp;
					大通湖河口*******&nbsp;</td>
				<td>13762******&nbsp;</td>   
				<td>&nbsp;</td>    
				<td>&nbsp;</td>
				<td>12-06-13 00:45</td>
				<td>12-06-13 11:19</td> 
				<td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>
			</tr>
		
			
			<tr class="red_class" onclick="findTrade(7)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
			
			
				
				<td class="ckTd"><input type="checkbox" value="7" name="tradeCheckBox"></td>
				<td>1011206275335</td>
				<td>成功&nbsp;</td>  
				<td>谢**&nbsp; </td>
				<td>湖南省&nbsp;  
					益阳市&nbsp; 
					南县&nbsp;
					大通湖河口********&nbsp;</td>
				<td>13762******&nbsp;</td>   
				<td>&nbsp;</td>    
				<td>尺码还是这个   买二送一的  两件杏色的一件黑色的  路丸   6.13&nbsp;</td>
				<td>12-06-13 00:48</td>
				<td>12-06-13 00:48</td> 
				<td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>
			</tr>
		
			
			
			<tr onclick="findTrade(8)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
			
				
				<td class="ckTd"><input type="checkbox" value="8" name="tradeCheckBox"></td>
				<td>10112062753**</td>
				<td>成功&nbsp;</td>  
				<td>谢**&nbsp; </td>
				<td>湖南省&nbsp;  
					益阳市&nbsp; 
					南县&nbsp;
					大通湖河口*******&nbsp;</td>
				<td>13762******&nbsp;</td>   
				<td>&nbsp;</td>    
				<td>&nbsp;</td>
				<td>12-06-13 11:18</td>
				<td>12-06-13 11:22</td> 
				<td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>
			</tr>
		
			
			
			<tr onclick="findTrade(9)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
			
				
				<td class="ckTd"><input type="checkbox" value="9" name="tradeCheckBox"></td>
				<td>1011206275337</td>
				<td>关闭&nbsp;</td>  
				<td>蒋*&nbsp; </td>
				<td>上海&nbsp;  
					上海市&nbsp; 
					浦东新区&nbsp;
					*******&nbsp;</td>
				<td>13816******&nbsp;</td>   
				<td>&nbsp;</td>    
				<td>&nbsp;</td>
				<td>12-06-27 10:10</td>
				<td>12-06-27 10:12</td> 
				<td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>
			</tr>
		
			
			
			<tr onclick="findTrade(10)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
			
				
				<td class="ckTd"><input type="checkbox" value="10" name="tradeCheckBox"></td>
				<td>1011206275338</td>
				<td>成功&nbsp;</td>  
				<td>陈*&nbsp; </td>
				<td>山东省&nbsp;  
					东营市&nbsp; 
					河口区&nbsp;
					山东省 东营市 河口区*****&nbsp;</td>
				<td>18754******&nbsp;</td>   
				<td>&nbsp;</td>    
				<td>&nbsp;</td>
				<td>12-06-20 13:20</td>
				<td>12-06-20 13:24</td> 
				<td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>
			</tr>
		
			
			<tr class="red_class" onclick="findTrade(11)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
			
			
				
				<td class="ckTd"><input type="checkbox" value="11" name="tradeCheckBox"></td>
				<td>10112062753**</td>
				<td>成功&nbsp;</td>  
				<td>缪**&nbsp; </td>
				<td>上海&nbsp;  
					上海市&nbsp; 
					普陀区&nbsp;
					桃浦路300弄*******&nbsp;</td>
				<td>18017******&nbsp;</td>   
				<td>束胸三送一的话最好别送大红色的哟，能送米色的最好。嘻嘻
希望明天能发货&nbsp;</td>    
				<td>&nbsp;</td>
				<td>12-06-23 02:32</td>
				<td>12-06-23 02:34</td> 
				<td style="display: none;"><input type="text" value="NORMAL" class="abnormalTypeText"></td>
			</tr>

	</tbody>		 	
	</table>
</div>
<script src="./固定表头——一然博客 www.zhudongdong.cn_files/jquery.min.js"></script>
<script>
//利用js让头部与内容对应列宽度一致。
function fix(){
  for(var i=0;i<=$('.t_table .pp-list tr:last').find('td:last').index();i++){
  $('th').eq(i).css('width',$('.t_table .pp-list tr:last').find('td').eq(i).width());
  }
}
window.load=fix();
$(window).resize(function(){
  return fix();
});

//当有横向滚动条时，需要此js，时内容滚动头部也能滚动。
$('.t_table').scroll(function(){
  $('#table_head').css('margin-left',-($('.t_table').scrollLeft()));
});
</script>

</body></html>
分享到：
| 网站建设笔记
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery网页下拉滚动表格头部固定在顶端代码

    为了解决这个问题，"jQuery网页下拉滚动表格头部固定在顶端代码" 提供了一种解决方案，它允许表格的头部在用户滚动页面时始终保持在视口的顶部，这样用户就能始终看到列标题，增强可读性和交互性。 首先，这个解决...

    jQuery仿excel表格头部固定内容滚动效果代码

    【jQuery仿Excel表格头部固定内容滚动效果代码】是一种在网页中实现类似电子表格的交互体验的技术，它使得用户在浏览长表格时，可以保持表头（即列标题）始终可见，即使当表格内容滚动时也是如此。这个功能在数据量...

    Js实现表格头部第一行下拉固定

    总的来说，实现“表格头部第一行下拉固定”是通过结合HTML结构、CSS样式和JavaScript事件处理来完成的。理解这一过程可以帮助开发者更好地掌握网页动态效果的实现，提升用户体验。在实际项目中，可以根据需求选择...

    表格头部固定不动，数据滚动插件

    为了解决这个问题，出现了“表格头部固定不动，数据滚动”这种交互设计。本插件就是专门为此目的设计的，其标题为“表格头部固定不动，数据滚动插件”，描述中提到它提供了详细的使用方法和内容，可从下载包中获取。...

    jQuery向下滚动表格头部固定代码

    在这个场景中，"jQuery向下滚动表格头部固定代码"是指使用jQuery来编写脚本，确保表格的表头在页面滚动时始终保持可见。 要实现这个功能，首先需要在HTML中设置好表格结构，包括thead（表头）和tbody（表格主体）。...

    jQuery仿Excel表格右侧与头部固定代码

    "jQuery仿Excel表格右侧与头部固定代码"是一种实现此类功能的技术，它旨在为用户提供一个类似Excel的工作体验，即使在滚动浏览大量数据时也能保持表头和列宽不变，提高数据管理和操作的便捷性。 jQuery是一个强大的...

    jQuery仿Excel表格头部固定jQuery特效源码.zip

    总结，jQuery仿Excel表格头部固定特效的实现结合了CSS布局和JavaScript事件处理，通过巧妙的代码设计，能够有效地提升用户的浏览体验。理解这一技术不仅有助于提升开发技能，也能在项目实践中发挥重要作用。

    jQuery带滚动条头部固定表格代码.zip

    在这个项目中，开发者通过扩展EasyUI的功能，实现了表格头部固定的效果。 具体实现方式可能包括以下步骤： 1. 首先，引入jQuery和jQuery EasyUI的相关库文件，确保页面能正常使用这两个库的功能。 2. 创建一个基本...

    仿Excel表格头部固定jQuery特效.zip

    在本资源中，“仿Excel表格头部固定jQuery特效.zip”是一个包含JavaScript特效的压缩包，主要目的是实现一个类似于Excel软件中的滚动功能，使表格的头部在滚动时保持固定，以便用户在浏览长表格时能始终保持列标题...

    创建头部固定可滚动的表格

    标题中的“创建头部固定可滚动的表格”是指在网页设计中实现的一种常见功能，它允许表格的头部（列标题）在用户滚动表格内容时保持固定显示，以便于用户始终能够清楚地看到各列数据的对应关系。这个功能在处理大量...

    jQuery网页下拉滚动表格头部固定在顶端代码.zip

    《jQuery网页下拉滚动表格头部固定在顶端代码详解》 在网页设计中，尤其是在处理大量数据的表格时，保持表头在页面滚动时始终可见，能够显著提高用户体验。jQuery库提供了一个强大的解决方案，使得实现这一功能变得...

    JQ固定table头部的插件.zip_Table_自己编写jq固定表格头部插件

    为了解决这个问题，开发者通常会采用“固定表格头部”的技术。本文将详细介绍如何使用jQuery来实现一个轻便的固定表格头部插件，以提高用户体验。 标题中的"JQ固定table头部的插件"指的是使用jQuery库来创建一个...

    jQuery+Bootstrap实现页面向下滚动表格头部固定特效源码.zip

    "jQuery+Bootstrap实现页面向下滚动表格头部固定特效源码.zip" 是一个专为解决这一问题而设计的资源包，它利用了jQuery和Bootstrap这两个强大的前端框架来实现一个动态效果：当用户向下滚动页面时，表格的头部会始终...

    基于bootstrap的表格头固定jquery插件

    在网页中，尤其是数据密集型的应用，如报表或数据库查看，固定表格头部使得用户在滚动浏览长表格时始终能看见列名，从而更好地理解数据的含义。 Bootstrap是一个流行的前端开发框架，它提供了丰富的预设样式、组件...

    jQuery头部固定表格滚动条代码.zip

    总的来说，"jQuery头部固定表格滚动条代码.zip"是一个针对表格滚动效果的解决方案，通过JavaScript和jQuery库，实现了在表格内容滚动时保持表头固定在屏幕顶部的功能，从而提高了用户的浏览效率。这个代码包提供的...

    jQuery Bootstrap实现页面向下滚动表格头部固定特效源码.zip

    jQuery Bootstrap实现页面向下滚动表格头部固定特效源码是一款利用原生Bootstrap的表格在向下滚动时表格头位置固定不动，非常实用。本段代码适应于所有网站使用，有需要的朋友们可以前来下载使用，本段代码兼容目前...

    jquery-clone-tableheader table 头部固定

    表格头部固定示例 &lt;script src="jquery-1.3.2.min.js"&gt; &lt;script src="CloneTableHeader.js"&gt; table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; } ...

    jQuery仿Excel表格右侧与头部固定代码.zip

    《jQuery仿Excel表格右侧与头部固定代码》是一个实用的jQuery插件，主要目的是在网页上创建一种类似Excel的表格布局，使用户在滚动浏览长表格时，能够始终保持表头和右侧列固定，提高数据查看和操作的便利性。...

Magicbox
Global site tag (gtag.js) - Google Analytics