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 05 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
js 操作符汇总
Nov 08 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
layui 弹出删除确认界面的实例
Sep 06 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
店长岗位职责
2013/11/21 职场文书
个人校本研修方案
2014/05/26 职场文书
大学生心理活动总结
2014/07/04 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
工程资料员岗位职责
2015/04/13 职场文书
工作简历的自我评价
2019/05/16 职场文书
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android