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 编程引入命名空间的方法与代码
Aug 13 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 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中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
理解javascript中的闭包
2017/01/11 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
webpack之devtool详解
2018/02/10 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
Python写的一个简单监控系统
2015/06/19 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
介绍一下OSI七层模型
2012/07/03 面试题
机关作风建设剖析材料
2014/10/11 职场文书
三潭印月的导游词
2015/02/12 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL