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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
深入理解node.js之path模块
May 03 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
JS常用跨域方法实现原理解析
Dec 09 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
python通过floor函数舍弃小数位的方法
2015/03/17 Python
python选择排序算法实例总结
2015/07/01 Python
详解Python之unittest单元测试代码
2018/01/24 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python 实现二维列表转置
2019/12/02 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
应聘编辑职位自荐信范文
2014/01/05 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
旅游市场营销方案
2014/03/09 职场文书
销售个人求职信范文
2014/04/28 职场文书
房产协议书范本
2014/10/18 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
留学推荐信怎么写
2015/03/26 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle
python manim实现排序算法动画示例
2022/08/14 Python