DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> Jquery原生態實現表格header頭隨滾動條滾動而滾動
Jquery原生態實現表格header頭隨滾動條滾動而滾動
編輯:JavaScript綜合知識     

 表頭是浮動的,因為內容在同一頁面展示,當滾動時,看不到列頭,為了改動少只能使用jquery原生態實現滾動

最近在做一個項目,功能已經實現,突然用戶要求表頭是浮動的(因為內容在同一頁面展示,當滾動時,看不到列頭)。由於功能已經實現使用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屬性,否則表頭會錯位。   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved