Question

我有一张桌子

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

我想在00:00到07:00之间隐藏<tr>个标签，当我从08:00开始显示页面时，我希望有可能滚动到表格中的第一个元素。我试图为jQuery使用不同的插件，但它没有成功。有任何想法吗？

Answer 1

尝试将表格放在可滚动的div ... 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行，具体取决于高度，可以向下滚动。听起来你想要显示最后N行，并能够向上滚动。我可以建议反转行显示的顺序，显示最新的行吗？

否则您可以使用jQuery设置div的滚动位置。

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

Answer 2

不需要插件，只需将表放在可滚动的容器中，并使用类似下面的代码集：

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的工作演示。

滚动html表格

2 个答案: