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
javascript中的对象创建 实例附注释
Feb 08 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
ionic实现底部分享功能
May 11 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 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 写文本日志实现代码
2010/05/18 PHP
php静态文件生成类实例分析
2015/01/03 PHP
Javascript开发包大全整理
2006/12/22 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
javascript事件模型介绍
2016/05/31 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Python random模块常用方法
2014/11/03 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
python实现周期方波信号频谱图
2018/07/21 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
华为python面试题
2016/05/03 面试题
幼儿园秋游感想
2014/03/12 职场文书
环卫工人节活动总结
2014/08/29 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
Python集合的基础操作
2021/11/01 Python
php实例化对象的实例方法
2021/11/17 PHP