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 相关文章推荐
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
微信小程序实现底部弹出框
Nov 18 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
php的计数器程序
2006/10/09 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Django如何自定义分页
2018/09/25 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
UML设计模式笔试题
2014/06/07 面试题
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
机械工程系毕业生求职信
2013/09/27 职场文书
客服专员岗位职责
2014/02/28 职场文书
网络信息安全承诺书
2014/03/26 职场文书
住房租房协议书
2014/08/20 职场文书
农业项目投资意向书
2015/05/09 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL