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 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 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 curl模拟post提交数据示例
2013/12/31 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
vue 粒子特效的示例代码
2017/09/19 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
python爬虫实例详解
2018/06/19 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
小学综合实践活动总结
2014/07/07 职场文书
校外活动方案
2014/08/28 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
2015年资料员工作总结
2015/04/25 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
Python提取PDF指定内容并生成新文件
2021/06/09 Python
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技