CODEWITHSUNDEEP
jqueryscrollhtml-table
kipregel
kipregel

Reputation: 153

Scrolling in html table

I have a table

<table>
  <tr><td>00:00</td><td>Text1</td></td>
  .
  .
  <tr><td>23:00</td><td>Text23</td></td>
</table>

I want to hide <tr> tags from 00:00 to 07:00, and when page load my table shows from 08:00 But I want to have a possibility scrolling to first element in table. I tried to use different plugins for jQuery, but it was unsuccessful. Any ideas?

Upvotes: 1

Views: 3448

Answers (2)

Goran Mottram
Goran Mottram

Reputation: 6304

No plugin needed, just put the table inside a scrollable container and use something like the following set of code:

HTML:

<div id="tableContainer" style="height:200px; overflow:auto;">
    <table>
        <tr><td>00:00</td><td>Text1</td></td>
        .
        .
        <tr><td>23:00</td><td>Text23</td></td>
    </table>
</div>

jQuery:

$(document).ready(function(){
    var howMuchToScroll = $('div#tableContainer table td:contains("08:00")').offset().top - $('div#tableContainer table').offset().top;
    $('div#tableContainer').scrollTop(howMuchToScroll);
});

This script will allow you to automatically scroll to any given time (in this case 08:00) and will hide any items above assuming it can scroll down further. It will also allow you to hide later times if you choose the right height.

See a working demo at the following jsFiddle.

Upvotes: 1

Dutchie432
Dutchie432

Reputation: 29160

Try putting the table in a scrollable div... http://jsfiddle.net/qm7Vx/

Just change the height to what you want. You can also add the width property to your style attribute if you want to scroll horizontally also.

<div style="height:200px;overflow:auto;" id="tableScroller">
  <table>
  <tr><td>00:00</td><td>Text1</td></td>
  .
  .
  <tr><td>23:00</td><td>Text23</td></td>
  </table>
</div>

This will show the FIRST N rows depending on the height with the ability to scroll down. It sounds like you want to show the LAST N Rows with the ability to scroll up. Might I suggest reversing the order the rows are displayed, showing the latest first?

Otherwise you can use jQuery to set the scroll position of your div.

$('#tableScroller').scrollTop( $('#tableScroller table').height() );

Upvotes: 1

Related Questions