2014-12-03 46 views
1

一起滾動的表格行(subheaders?)我有一個很長的表格,我需要讓子表格與它們的表格部分一起滾動。我知道有很多功能可以滾動<thead>,但是當涉及到讓其他行也滾動時,我有點失落。基本上,這是表格的結構。創建與第

<table> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Date</th> 
      <th>Date</th>  
      <th>Date</th> 
     </tr> 
     <tr> 
      <th></th> 
      <th>Sales</th> 
      <th>Qty</th>  
      <th>%</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Location #1</td> 
      <td>$0.00</td> 
      <td>0.00</td> 
      <td>0.00%</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>$0.00</td> 
      <td>0.00</td> 
      <td>0.00%</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>$0.00</td> 
      <td>0.00</td> 
      <td>0.00%</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>$0.00</td> 
      <td>0.00</td> 
      <td>0.00%</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>$0.00</td> 
      <td>0.00</td> 
      <td>0.00%</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>$0.00</td> 
      <td>0.00</td> 
      <td>0.00%</td> 
     </tr> 
     //....undefined number of rows 
     <tr> 
      <td>Location #2</td> 
      <td>$0.00</td> 
      <td>0.00</td> 
      <td>0.00%</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>$0.00</td> 
      <td>0.00</td> 
      <td>0.00%</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>$0.00</td> 
      <td>0.00</td> 
      <td>0.00%</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>$0.00</td> 
      <td>0.00</td> 
      <td>0.00%</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>$0.00</td> 
      <td>0.00</td> 
      <td>0.00%</td> 
     </tr> 
     //...and so on, there can be an undefined number of groupings like this 
    </tbody> 
</table> 

所以我需要在兩行線程下的頁面與整個表滾動,以及與「位置」的行與頁面向下滾動,直到它涉及到一個新的「位置」 ,那麼它需要切換到滾動該行。

編輯:我不認爲這是一個鏈接問題的重複。所有這些只能解決頁面滾動的問題,我需要'subheader'(表格的行)滾動,直到它來到下一個子標題,以此類推,達到未定義的次數。

+0

我不認爲這是一樣的問題,你聯繫,看我的編輯,希望我解釋的更好。 – yerxa 2014-12-03 14:47:51

+0

是否有一個特定的問題,你不能解決或你只是要求代碼? – zhirzh 2014-12-03 15:24:15

+0

我已經使用插件,並可以獲取表的thead部分滾動頁面,但我不知道如何讓子頁眉行滾動以及。 – yerxa 2014-12-03 15:43:28

回答

0

好的,所以我寫了一些代碼,它完全符合你的要求,但遠不是成品。代碼解釋在最後。這裏是:

我所做的很簡單。

  1. 測量滾動的總距離。
  2. 檢查滾動距離在視口中是否保持theadtr
  3. 如果是,則應用css移動它
  4. 否則,應用作爲極值的css - 視口位於元素的上方或下方。

希望它有幫助。

PS:我知道我應該爲它做一個小提琴,我確實嘗試過,但我無法使它工作。如果有人可以爲這個代碼做一個小提琴,我會非常感激。

var table = $("#data_table"); 
 

 
\t var head = $("#data_table thead"); 
 
\t var head_top=head.offset().top; 
 

 
\t var rows = $("#data_table tbody tr"); 
 
\t var row_tops = []; 
 
\t for(var i =0; i< rows.length/6; i++){ 
 
\t \t row_tops[i]=rows[6*i].offsetTop + head_top - 60; 
 
\t \t rows[i*6].style.background="#555"; 
 
\t \t rows[i*6].style.color="#fff"; 
 
\t } 
 

 
\t var scrolled = null; 
 
\t var offset = null; 
 

 
\t var scroller=function(){ 
 
\t \t scrolled = $(window).scrollTop(); 
 

 
\t \t if (scrolled - head_top < 0){ 
 
\t \t \t offset=0; 
 
\t \t } else if(scrolled - head_top > table.height()){ 
 
\t \t \t offset=table.height(); 
 
\t \t } else{ 
 
\t \t \t offset=scrolled - head_top; 
 
\t \t }; 
 
\t \t head.css("transform","translateY("+offset+"px)"); 
 

 
\t \t for(var i=0; i<row_tops.length; i++){ 
 
\t \t \t if (scrolled - row_tops[i] < 0){ 
 
\t \t \t \t offset=0; 
 
\t \t \t } else if(scrolled - row_tops[i] > rows[6*i].offsetHeight*6){ 
 
\t \t \t \t offset=rows[6*i].offsetHeight*6; 
 
\t \t \t } else{ 
 
\t \t \t \t offset=scrolled - row_tops[i]; 
 
\t \t \t }; 
 

 
\t \t \t rows[6*i].style.transform="translateY("+(offset)+"px)"; 
 
\t \t } 
 
\t }; 
 

 
\t $(window).scroll(scroller);
table{ 
 
    border: 2px solid #ccc; 
 
    position: relative; 
 
    padding-top: 60px; 
 
    padding-bottom: 0px; 
 
} 
 
thead{ 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
    background: #234; 
 
    color: white; 
 
    transition: transform 100ms ease-out; 
 
    z-index: 1; 
 
} 
 
thead th{ 
 
    border-bottom: 1px solid #fff; 
 
    width: 100%; 
 
} 
 
tbody tr{ 
 
    background: white; 
 
    transition: transform 100ms ease-out; 
 

 
}
<br><br><br><br><br><br> 
 
    \t <h2>There's a lot of br elements, just to check scrolling effects<br>The main table can be seen after scrolling a bit</h2> 
 
    \t <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 

 
    \t <table id="data_table"> 
 
    \t \t <thead> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <th></th> 
 
    \t \t \t \t <th>Date</th> 
 
    \t \t \t \t <th>Date</th>  
 
    \t \t \t \t <th>Date</th> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <th></th> 
 
    \t \t \t \t <th>Sales</th> 
 
    \t \t \t \t <th>Qty</th>  
 
    \t \t \t \t <th>%</th> 
 
    \t \t \t </tr> 
 
    \t \t </thead> 
 
    \t \t <tbody> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td>Location #1</td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td>Location #2</td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td>Location #3</td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td>Location #4</td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td>Location #5</td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t \t <td>$0.00</td> 
 
    \t \t \t \t <td>0.00</td> 
 
    \t \t \t \t <td>0.00%</td> 
 
    \t \t \t </tr> 
 
    \t \t </tbody> 
 
    \t </table> 
 

 
    \t <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

+1

謝謝,這有助於我指出正確的方向。做了一些改變,以便使用類,而不是每6行硬編碼,但這正是我需要幫助我開始的。 – yerxa 2014-12-04 12:55:14

+0

嗯...添加類。我希望我也想過。尼斯。 – zhirzh 2014-12-04 13:13:06