Javascript：通过隐藏行使表格适合垂直屏幕

Question

我有一个（几乎）“无尽的”表（这些类型的东西通常只显示一定数量的行，下面的导航栏显示下一页，例如“显示下一个30个结果”或“显示下一个页面”）。

行也有可变高度。

有没有办法隐藏不适合屏幕的所有行，以便整个表格可靠地贴合在页面上，并且最后的导航行始终可见而无需滚动？

的想法基本上是向浏览器发送一个简单的HTML表，就像这样：

<table> 
<tr><th>Data1</th><td>More data</td></tr> 
<tr><th>Data2</th><td>More<br>data<br>in<br>larger<br>row</td></tr> 
<tr><th>Data3</th><td>More data that may be wrapped around because the user may not have a wide enough window for it</td></tr> 
<tr><th>Data4</th><td>More data</td></tr> 
<tr><th>Data5</th><td>More data</td></tr> 
<tr><th>Data6</th><td>More data</td></tr> 
<tr><th>Data7</th><td>More data</td></tr> 
<tr><th>Data8</th><td>More data</td></tr> 
<tr><th>Data9</th><td>More data</td></tr> 
<tr><th colspan=2>NAVIGATION ROW</th></tr> 
</table> 

例如，如果只有1-4行（加导航行）适合在屏幕上，行5 9应该隐藏/折叠，并设置<input type=hidden name=lastrow value=4>（或相当于知道下一页的继续）。

这种方式的内容应该总是适合屏幕和用户永远不需要滚动。

该表是页面上唯一可见的东西。

PS：this question的解决方案仅适用于等高行，不适用于可变高度行。

可能吗？

Answer 1

应该很容易。 ONLOAD浏览器需要看

1. 窗口
2. 表
3. 表

如果表+偏移大于较高的垂直偏移值的高度的高度窗口，然后从底部删除一行，直到这是不真实的

让让你的表的ID“myTable”

$(function(){ 
    // on load, run shrinkTable 
    shrinkTable(); 
}); 

function shrinkTable(){ 
    if($("#myTable tr").length > 0){ 
     if(($("#myTable").height() + $("#myTable").offset().top) > $(window).height()){ 
      $('#myTable tr:not(.navrow):last').remove(); 
      // run itself again! 
      // this will run in a loop until the top condition is no longer met. 
      shrinkTable(); 
     } 
    } 
} 

小提琴：http://jsfiddle.net/sqay450r/

你要面对的唯一问题是，你接下来要通知“第2页”你有多少行被删除，否则你会被跳过数据

更新：

更改脚本以不删除导航行。我为此添加了一个“navrow”类。我还添加了第二个条件来检查表是否没有行，以防我们将其全部删除并进入无限循环