Прокрутка в HTML таблице

Question

У меня есть таблица

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

Я хочу скрыть <tr> теги с 00:00 до 07:00, и при загрузке страницы моя таблица показывает с 08:00, но я хочу иметьВозможность прокрутки до первого элемента в таблице.Я пытался использовать разные плагины для jQuery, но это не удалось.Есть идеи?

Answer 1

Плагин не нужен, просто поместите таблицу в прокручиваемый контейнер и используйте что-то вроде следующего набора кода:

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);
});

Этот скрипт позволит вам автоматически прокручивать в любой момент времени (в данном случае 08:00) и будет скрывать любые элементы выше, если он может прокрутиться вниз.Это также позволит вам прятаться позже, если вы выберете правильную высоту.

См. Рабочую демонстрацию по следующему jsFiddle .

Answer 2

Попробуйте поместить таблицу в прокручиваемый разделитель ... http://jsfiddle.net/qm7Vx/

Просто измените высоту на то, что вы хотите. Вы также можете добавить свойство width в свой атрибут style, если вы также хотите прокрутить по горизонтали.

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

Это покажет ПЕРВЫЕ N строк в зависимости от высоты с возможностью прокрутки вниз. Звучит так, будто вы хотите показать LAST N Rows с возможностью прокрутки вверх. Могу ли я предложить поменять порядок отображения строк, показывая сначала последние?

В противном случае вы можете использовать jQuery для установки позиции прокрутки вашего div.

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