Jquery原生态实现表格header头随滚动条滚动而滚动


Posted in Javascript onMarch 18, 2014

最近在做一个项目,功能已经实现,突然用户要求表头是浮动的(因为内容在同一页面展示,当滚动时,看不到列头)。由于功能已经实现使用jquery+纯html,为了改动少只能使用jquery原生态实现滚动。

html表头代码:

<tr class="header" > 
<td width="150" style="border-bottom:0px;"> </td> 
<td colspan="2" style="border-bottom:0px;"> </td> 
<td colspan="7">师资力量</td> 
<td colspan="14">科研</td> 
<td style="border-bottom:0px;"> </td> 
</tr> 
<tr class="header"> 
<td width="150" style="border-top:0px;border-bottom:0px;"> </td> 
<td colspan="2" style="border-top:0px;">人才培养</td> 
<td colspan="3">职称结构</td> 
<td colspan="2">学位结构</td> 
<td colspan="2">生师比</td> 
<td colspan="2">科研项目</td> 
<td colspan="6">科研成果奖</td> 
<td colspan="6">科研论文</td> 
<td style="border-top:0px;border-bottom:0px;"> </td> 
</tr> 
<tr class="header"> 
<td width="150" style="border-top:0px;">教学单位</td> 
<td><a href="javascript:void(0);" id="undergraduate">本科生数</a></td> 
<td><a href="javascript:void(0);" id="graduate">研究生数</a></td> 
<td>教职工数</td> 
<td>高级教职工数</td> 
<td>中级教职工数</td> 
<td>博士学位职工数</td> 
<td>硕士学位教职工数</td> 
<td>本科生生师比</td> 
<td>研究生生师比</td> 
<td>纵向项目</td> 
<td>横向项目</td> 
<td>国家级科研成果</td> 
<td>部级科研成果</td> 
<td>省级科研成果</td> 
<td>地级科研成果</td> 
<td>校级科研成果</td> 
<td>其它科研成果</td> 
<td>核心期刊论文</td> 
<td>一类奖励期刊论文</td> 
<td>二类奖励期刊论文</td> 
<td>三类奖励期刊论文</td> 
<td>一般期刊论文</td> 
<td>国外期刊论文</td> 
<td style="border-top:0px;">财务工资</td> 
</tr>

jquery代码:
$(window).scroll(function(){ 
var headers = $(".header");//获取所有表头行,当前的是3行表头 
var yy = $(this).scrollTop();//滚动条top值 
if(yy>55){ 
yy = yy-55; 
} 
var height1 = yy;//第一行top值 
var height2 = $(headers[0]).height()+yy;<span style="font-family:Arial,Helvetica,sans-serif">//第一行top值,第一行行高与</span><span style="font-family:Arial,Helvetica,sans-serif">滚动条top值之和</span><span style="font-family:Arial,Helvetica,sans-serif"> 
</span> var height3 = $(headers[0]).height()+$(headers[1]).height()+yy; 
$(headers[0]).css({"position":"absolute",top:height1+"px"});//浮动行 
$(headers[1]).css({"position":"absolute",top:height2+"px"}); 
$(headers[2]).css({"position":"absolute",top:height3+"px"}); [javascript] view plaincopy 
$("#hiddenTd").height($(headers[0]).height()+$(headers[1]).height()+$(headers[2]).height());<span style="font-family:Arial,Helvetica,sans-serif">//由于表头浮动,对应的表内容自动上移,为了浮动表头不会覆盖表内容,设置空行,高度为表头高</span>

注意:多行表头时,单元格不要使用rowspan属性,否则表头会错位。
Javascript 相关文章推荐
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 #Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 #Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 #Javascript
js身份证判断方法支持15位和18位
Mar 18 #Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 #Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 #Javascript
javascript页面上使用动态时间具体实现
Mar 18 #Javascript
You might like
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
jquery实现数字输入框
2017/02/22 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python中Selenium模块的使用详解
2020/10/09 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
this关键字的含义
2015/04/08 面试题
文明青少年标兵事迹材料
2014/01/28 职场文书
新春联欢会主持词
2014/03/24 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
新法人代表任命书
2014/06/06 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
php中pcntl_fork详解
2021/04/01 PHP
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android