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
关注
专栏目录
jQuery网页下拉滚动表格头部固定在顶端代码
06-10
为了解决这个问题，"jQuery网页下拉滚动表格头部固定在顶端代码" 提供了一种解决方案，它允许表格的头部在用户滚动页面时始终保持在视口的顶部，这样用户就能始终看到列标题，增强可读性和交互性。 首先，这个解决...
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
JS-元素超过可视区域后固定在头部
wang704987562的博客
08-11 1776
使用 JS实现元素超过可视区域后固定在头部功能 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style&a
js固定表头
小码农大梦想
12-19 963
js固定表头 由于table的表头是js根据后台的数据直接动态拼接的html标签,所以Bootstrap的冻结表头用不了。 css代码片. #fixed_table #fix_tr1{ background: #FFFFFF; } #fixed_table #fix_tr2{ background: #...
js表头固定实现思路汇总
chrisjingu的专栏
09-11 4442
关于表头固定，表内容滚动的实现，本人总结了3中实现思路，具体如下： 思路一 　　当发生滚动事件后，动态复制一份表头，将其放置在原表头的位置，为滚动的容器添加scroll事件，时刻保持复制表头的top=滚动容条的垂直位置($(obj).scrollTop()) 以下为demo代码实现： -CSS 实现 .table { width:240px; }
JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】
charlatans的博客
08-12 3808
本文主要介绍关于JS或Vue中如何进行表头，列固定，可以根据实际应用场景应用于原生，Vue，移动端，小程序中。实现逻辑：表头，列头，表格本身，这三个内容被分为了三块元素，将这三个内容进行抽离，并且通过定位和大盒子的包裹进行样式管理。【当要进行滚动时，只要对滚动事件进行绑定，让表头和列头显示对应的内容就完成了滚动的操作】下面有Vue组件的和JavaScript原生的代码，可以直接运行查看逻辑和效果。.........
仿Excel表格头部固定jQuery特效
06-24
在网页设计中，为了提供更好的用户体验，特别是在处理大量数据时，仿Excel表格头部固定的jQuery特效是一种常见的技术手段。这种特效允许用户在滚动页面时，表格的列头始终保持可见，类似于Excel软件的操作方式，使得...
Js实现表格头部第一行下拉固定
09-04
总的来说，实现“表格头部第一行下拉固定”是通过结合HTML结构、CSS样式和JavaScript事件处理来完成的。理解这一过程可以帮助开发者更好地掌握网页动态效果的实现，提升用户体验。在实际项目中，可以根据需求选择...
jQuery头部固定表格滚动条代码
06-24
总结起来，"jQuery头部固定表格滚动条代码"是一种增强网页表格用户体验的技术，它利用jQuery库实现了表格头部的固定和滚动条的平滑效果。通过合理的HTML结构、CSS样式和JavaScript代码，我们可以创建出一个既美观又...
jQuery仿Excel表格右侧与头部固定代码
06-10
"jQuery仿Excel表格右侧与头部固定代码"是一种实现此类功能的技术，它旨在为用户提供一个类似Excel的工作体验，即使在滚动浏览大量数据时也能保持表头和列宽不变，提高数据管理和操作的便捷性。 jQuery是一个强大的...
js实现表格部分固定
10-16
js实现表格部分固定，横向标题，纵向标题的固定。下载查看。
js表格头固定
10-29
很好的表头固定，便于初学者学习！代码简单易懂！特别简单
jquery.freezeheader.js表格thead随滚动条滚动
11-10
jquery.freezeheader.js表格thead随滚动条滚动
jquery插件table表格头部和左侧固定
09-29
大家可能经常需要展示数据或者报表，表头如果滚动上去后，查看数据的类别和字段是个麻烦事情，在这里我们推荐来自tympanus的一个JS实现的 table表头固定效果，相信大家肯定会受益的，这个demo使用了jQuery来实现，所以能够很好的支持各种浏览器上的报表展示！
js table 固定表头
02-16
js table 固定表头
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+css3实现固定表格头和列
catastrophe_zy的博客
08-13 4360
受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...
js实现table 表头顶部固定方法
这么多柠檬c
02-06 1909
业务需求需要顶部固定表头方式实现。 <div> <div class="table-head" style="margin-bottom: -20px;"> <table class="table table-striped"> <thead> <th>期数</th> <th>时间</th>
JS+CSS 实现表格头部固定
weixin_39475476的博客
01-19 429
JS+CSS表格头部固定
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、付费专栏及课程。

余额充值