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

我有一个（几乎是“无休止的”表格（这类东西通常只显示一定数量的行，下面有一个导航栏来显示下一页，例如“显示下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更多数据
数据2更多
数据
在
更大的
行中
Data3由于用户可能没有足够宽的窗口而可能被包装的更多数据
数据4更多数据
数据5更多数据
数据6更多数据
数据7更多数据
数据8更多数据
数据9更多数据
导航行

例如，如果屏幕上只显示第1-4行（加上导航行），则应隐藏/折叠第5-9行，并设置

（或一些等效行，以便知道下一页的继续位置）

这样，内容应该始终适合屏幕，用户就不需要滚动

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

PS：来自的解决方案仅适用于等高行，不适用于可变高度行

---

有可能吗？

应该很容易。加载浏览器需要查看的内容

窗户的高度

桌子的高度

表的垂直偏移值

如果“表格+偏移量”高于窗口，则从底部删除一行，直到不正确为止

让我们为您的表指定一个ID“myTable”

小提琴：

您将面临的唯一问题是，您必须通知“第2页”您删除了多少行，否则您将跳过数据

更新：

---

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

我衷心建议查看datatables插件。您需要进行一些jiggery扑克牌操作，使其根据视图的高度动态工作，但它将为您处理其他一切。。。是否有一个示例可以显示此功能？让该表使用datatables（它将为您进行分页），然后您可以使用示例代码提问并从中获取。我已经有分页功能，所以我不需要它-在查看datatables.net后，我在任何地方都没有看到该功能，因此，简单的JS/jQuery可能比尝试将该功能添加到datatables要容易得多。效果非常好。还需要将第一个数据行定义为navrow，以确保至少显示一行（以避免用户被卡住）

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