1

I have a long table that I need to have the subheaders scroll with their part of the table. I know there are plenty of functions out there that will scroll the <thead>, but I'm a little lost when it comes to getting other rows to scroll as well. Basically, this is the structure of the table.

<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>

So I need the two rows in the thread to scroll down the page with the entire table, as well as the rows with 'Location' to scroll down with the page until it comes to a new 'Location', then it needs to switch to scroll that row.

EDIT: I don't think that this is a duplicate of the linked question. All of those only address the header scrolling with the page, I need the 'subheader' (rows of the table) to scroll until it comes to the next subheader and so on for an undefined number of times.

yerxa
  • 33
  • 6
  • I don't think this is the same as the question you linked, see my edit, hopefully I explained it better. – yerxa Dec 03 '14 at 14:47
  • is there a particular problem that you can't work around or are you just asking for the code? – zhirzh Dec 03 '14 at 15:24
  • I've used plugins and can get the thead part of the table to scroll with the page, but I don't know how to get the subheader rows to scroll as well. – yerxa Dec 03 '14 at 15:43
  • Well, it definitely won't work with just the HTML you've posted alone. Do you have any css or javascript to go with this that's not working for you or... are you asking someone to write the code for you for free? – Larz Dec 03 '14 at 22:33

1 Answers1

0

Ok, so i've written some code that does exactly what you want, but is far from a finished product. The code explaination is at the end. Here it goes:

What I've done is fairly simple.

  1. Measure the total distance scrolled.
  2. Check if scrolled distance keeps thead or tr in viewport.
  3. If yes, then apply css to move it
  4. Else, apply css that acts as extrems - either the viewport is above or below the elements.

Hope it helps.

PS: I know I should've made a fiddle for it and I did try, but i couldn't get it to work. If someone can make a fiddle for this code, I'd appreciate that very much.

var table =  $("#data_table");

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

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

 var scrolled = null;
 var offset = null;

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

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

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

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

 $(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>
     <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>
     <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>

     <table id="data_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>
       <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>
       <tr>
        <td>Location #3</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>
       <tr>
        <td>Location #4</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>
       <tr>
        <td>Location #5</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>
      </tbody>
     </table>

     <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>
Larz
  • 1,156
  • 1
  • 8
  • 22
zhirzh
  • 3,273
  • 3
  • 25
  • 30
  • 1
    Thanks, this helped point me in the right direction. Made a few changes so that it used classes instead of hard coding every 6th row, but this was exactly what I needed to help me get started. – yerxa Dec 04 '14 at 12:55
  • hmm... adding classes. I wish I'd thought about it too. Nice. – zhirzh Dec 04 '14 at 13:13