JS表格头部固定-转

最新推荐文章于 2022-08-12 09:59:43 发布
最新推荐文章于 2022-08-12 09:59:43 发布
阅读量328 收藏
点赞数
分类专栏： JS表格头部固定-转 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cqh520llr/article/details/84483534
版权 

<!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>成功 </td>  
				<td>杨*  </td>
				<td>福建省   
					厦门市  
					思明区 
					厦门大学学生公寓** </td>
				<td>15260****** </td>   
				<td> </td>    
				<td> </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>等待用户确认收货 </td>  
				<td>孔**  </td>
				<td>四川省   
					成都市  
					温江区 
					文化路251号观澜半岛******* </td>
				<td>13880****** </td>   
				<td> </td>    
				<td> </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>成功 </td>  
				<td>刘*  </td>
				<td>山东省   
					潍坊市  
					奎文区 
					玉清街北海路交叉口******** </td>
				<td>15094****** </td>   
				<td> </td>    
				<td> </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>发货处理中 </td>  
				<td>马**  </td>
				<td>江苏   
					无锡  
					宜兴市 
					宜兴市宜城街道东山西路******** </td>
				<td> </td>   
				<td>我要一件粉色，一件米色，一件白色 </td>    
				<td> </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>成功 </td>  
				<td>李**  </td>
				<td>北京   
					北京市  
					海淀区 
					北京海淀区太平路*****—1—801 </td>
				<td>18210****** </td>   
				<td> </td>    
				<td>买三送一 每个颜色发一件 路丸   6.18 </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>成功 </td>  
				<td>谢**  </td>
				<td>湖南省   
					益阳市  
					南县 
					大通湖河口******* </td>
				<td>13762****** </td>   
				<td> </td>    
				<td> </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>成功 </td>  
				<td>谢**  </td>
				<td>湖南省   
					益阳市  
					南县 
					大通湖河口******** </td>
				<td>13762****** </td>   
				<td> </td>    
				<td>尺码还是这个   买二送一的  两件杏色的一件黑色的  路丸   6.13 </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>成功 </td>  
				<td>谢**  </td>
				<td>湖南省   
					益阳市  
					南县 
					大通湖河口******* </td>
				<td>13762****** </td>   
				<td> </td>    
				<td> </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>关闭 </td>  
				<td>蒋*  </td>
				<td>上海   
					上海市  
					浦东新区 
					******* </td>
				<td>13816****** </td>   
				<td> </td>    
				<td> </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>成功 </td>  
				<td>陈*  </td>
				<td>山东省   
					东营市  
					河口区 
					山东省 东营市 河口区***** </td>
				<td>18754****** </td>   
				<td> </td>    
				<td> </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>成功 </td>  
				<td>缪**  </td>
				<td>上海   
					上海市  
					普陀区 
					桃浦路300弄******* </td>
				<td>18017****** </td>   
				<td>束胸三送一的话最好别送大红色的哟，能送米色的最好。嘻嘻
希望明天能发货 </td>    
				<td> </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>
cqh520llr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js实现表格头部第一行下拉固定
09-04
Js实现表格头部第一行下拉固定
js实现表格部分固定
10-16
js实现表格部分固定，横向标题，纵向标题的固定。下载查看。
js实现表头固定
javaStudentZhang的博客
06-10 7029
思路：一、table用div包裹，设置div的高度和滚动条，二、克隆table的表头，添加到div中，设为浮动，三、表头的top是滚动条的上方距离&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;test&lt;/title&amp
js+css3实现固定表格头和列
catastrophe_zy的博客
08-13 4357
受css3实现固定表格头部而无需设置单元格td的宽度这篇文章启发，用css3的transform实现的表格头和列固定， 这种实现方式优势就是简单，高效，原生。不改变table结构 以下只是简单的实现 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Table...
JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】
charlatans的博客
08-12 3788
本文主要介绍关于JS或Vue中如何进行表头，列固定，可以根据实际应用场景应用于原生，Vue，移动端，小程序中。实现逻辑：表头，列头，表格本身，这三个内容被分为了三块元素，将这三个内容进行抽离，并且通过定位和大盒子的包裹进行样式管理。【当要进行滚动时，只要对滚动事件进行绑定，让表头和列头显示对应的内容就完成了滚动的操作】下面有Vue组件的和JavaScript原生的代码，可以直接运行查看逻辑和效果。.........
jQuery网页下拉滚动表格头部固定在顶端代码
06-10
为了解决这个问题，"jQuery网页下拉滚动表格头部固定在顶端代码" 提供了一种解决方案，它允许表格的头部在用户滚动页面时始终保持在视口的顶部，这样用户就能始终看到列标题，增强可读性和交互性。 首先，这个解决...
jQuery仿excel表格头部固定内容滚动效果代码
10-27
【jQuery仿Excel表格头部固定内容滚动效果代码】是一种在网页中实现类似电子表格的交互体验的技术，它使得用户在浏览长表格时，可以保持表头（即列标题）始终可见，即使当表格内容滚动时也是如此。这个功能在数据量...
仿Excel表格头部固定jQuery特效
06-24
在网页设计中，为了提供更好的用户体验，特别是在处理大量数据时，仿Excel表格头部固定的jQuery特效是一种常见的技术手段。这种特效允许用户在滚动页面时，表格的列头始终保持可见，类似于Excel软件的操作方式，使得...
jQuery带滚动条头部固定表格代码.zip
07-11
这就是"jQuery带滚动条头部固定表格代码"所解决的问题。 jQuery 是一个广泛使用的JavaScript库，它简化了HTML DOM（文档对象模型）的操作、事件处理、动画设计以及Ajax交互。在本案例中，结合EasyUI——一个基于...
固定表头（行头列头）脚本
07-04
用javascript和css实现固定表格的行头列头。
js table 固定表头
02-16
js table 固定表头
js固定表头和第一列固定
03-21
js固定表头和第一列固定，内容变化
表格固定头部，底部，左侧
是一座岛
11-15 1751
1.效果2.实现思路table：表格自适应屏幕的宽度和高度，要实现滚动的话，必须外层加上div(设置你需要的宽度，和高度)，table宽度超过了屏幕的宽度出现水平滚动条，高度超过了div高度出现垂直滚动条。3.实现步骤表头，表内容，底部汇总：分别用三个div(head_div,content_div,foot_div)包裹住，其中表内容的div要设置高度，这样就实现了中间内容滚动，表头底部内容固定...
js固定表格表头（高扩展性）
qq_36608036的博客
04-29 903
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
table表格头部和前几列固定js
热门推荐
helal的博客
06-24 1万+
表格内容很多，需要把成表格的第1行和前4列固定住，其他td滑动。看了这篇文章写得不错https://www.cnblogs.com/yougewe/p/5484251.html  写得很清楚，但是表格滑动的时候出现严重错位，下了作者最新上传的代码   2018-01-14 11:10    还是有错位；我看了js文件，在获取td和th的宽高时有些用的innerWidth()和height()；in...
js 固定table表格表头及固定列
12-26 1690
//给table 外层加一个div然后将divid传入方法，arr是一个数组里面填写需要固定的列数 function fixedCol(arr,divId){ var colArr = arr || []; colArr.forEach(function(val){ $("#"+divId).scroll(function(){ var left = ...
前端-页面图表-表头固定(JS实现)
chansanity的博客
10-24 2527
html <div class="small-table"> <table cellspacing="0"> <thead> <tr> <td>质控点编号</td> <td>质控点名称</td> <td>车身组件名称</d>
js固定表头的实现（转）
weixin_34309435的博客
05-18 131
　原文链接：http://www.th7.cn/web/js/201509/121055.shtml    参考链接：http://www.jb51.net/article/102568.htm 写两个表格，一个为表头，另一个为表内容。当表内容数据量比较大时，可以直接在表内容所在的父容器进行滚动。以下为demo代码实现： &lt;table&gt; &lt;thead class="h...
H5页面的表格左边一列固定 头部固定上下左右可以滑动
最新发布
05-26
同时，实现头部固定上下左右滑动也可以使用position属性，只需将表格容器和表格头部分别设置为position:fixed;即可。在滚动时，通过JavaScript获取表格容器的scrollTop和scrollLeft值，设置表格头部的top和left值...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值