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 window.print实现打印特定控件或内容
Sep 16 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
浅谈JS的原型和继承
May 08 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
JavaScript中CreateTextFile函数
Aug 30 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python continue继续循环用法总结
2018/06/10 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
生产厂长岗位职责
2014/02/21 职场文书
竞选部长演讲稿
2014/04/26 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
六五普法心得体会2016
2016/01/21 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏