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多种数据类型表格排序代码分析
Sep 11 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
python操作 hbase 数据的方法
2016/12/18 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
Python运行DLL文件的方法
2020/01/17 Python
Python使用configparser库读取配置文件
2020/02/22 Python
python交互模式基础知识点学习
2020/06/18 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
组工干部演讲稿
2014/09/02 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
订货会邀请函
2015/01/31 职场文书
爱心捐书倡议书
2015/04/27 职场文书
圣诞晚会主持词
2015/07/01 职场文书
活动宣传稿范文
2015/07/23 职场文书
教师远程研修感悟
2015/11/18 职场文书
幼儿园大班教学反思
2016/03/02 职场文书