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 相关文章推荐
JS实现self的resend
Jul 22 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
如何使JavaScript休眠或等待
Apr 27 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
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python 读入多行数据的实例
2018/04/19 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
《小儿垂钓》教学反思
2014/02/23 职场文书
学生个人自我鉴定
2014/03/26 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
违反交通法规检讨书
2014/09/10 职场文书
车间质检员岗位职责
2015/04/08 职场文书
2015公司年度工作总结
2015/05/14 职场文书
民事调解协议书
2016/03/21 职场文书
民事纠纷协议书
2016/03/23 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript