Jquery实现表格header头随滚动条滚动而滚动

来源：互联网发布：意大利脱欧知乎编辑：程序博客网时间：2024/05/22 03:33

最近在做一个项目，功能已经实现，突然用户要求表头是浮动的（因为内容在同一页面展示，当滚动时，看不到列头）。由于功能已经实现使用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;//第一行top值，第一行行高与滚动条top值之和   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"});

   $("#hiddenTd").height($(headers[0]).height()+$(headers[1]).height()+$(headers[2]).height());//由于表头浮动，对应的表内容自动上移，为了浮动表头不会覆盖表内容，设置空行，高度为表头高});

注意：多行表头时，单元格不要使用rowspan属性，否则表头会错位。