Javascript JQuery：如何计算容器中要显示的行数

有点难以解释，但让我试试：
我想把一张桌子放在一个容器里。这个容器有一个固定的高度，比如说500px，桌子相当长，比如说2100，每行的高度可以不同

创建表时，所有行都是不可见的，现在我想根据容器的高度进行计算，以确定容器中应该显示多少行。可以是前15行，也可以是前17行（因为某些行的高度更大）

---

在我这样做之后，我让这些行在那里停留一段时间，然后再次隐藏它们，并进行另一次计算以获取下一页，依此类推。。。现在最难的部分是如何使用jquery进行计算？

您可以通过使用

jquery.innerHeight

和

jquery.outerHeight

函数获得浏览器计算的高度。因此，您可以首先获得容器的计算高度。然后您可以遍历行并添加它们的计算高度，直到总和大于容器的计算高度，依此类推

---

希望这能有所帮助。

遍历行，将它们的高度相加。一旦超过500行，则取除最后一行之外的一组行。展示那些。使用某种标记（可能是变量或数据注释）跟踪您所处的位置。

也许您可以这样做：

fits = true;
while(fits){
    $(table).append('<tr>...</tr>');

    if($(table).css('height') >= $('#container').css('height'))
        fits = false;
}

fits=true；
while（适合）{
$（表）.append（“…”）；
if（$（table）.css（'height'）>=$（'#container'）.css（'height'））
拟合=假；
}

这并没有解决“停留一段时间并在一段时间后获取下一组行”部分的问题，但这里有一个简单的高度计算，显示了相应的行

JS

---

您可以尝试一件事，首先将第一行的不透明度降低为0.1，使其几乎不可见，将其附加到正文中的任何位置，使用jQuery

height（）

查找其高度，然后将不透明度恢复为1并将其附加到容器中。计算下一行的高度，如果仍有可能将其放入容器中，请追加，然后继续，直到无法添加为止。

allowedHeight = $("div").height();
actualHeight = 0;

$("tr").each(function(){
    actualHeight += $(this).height();
    if(actualHeight < allowedHeight) {
        $(this).show();
    }
});
​

<div>
<table>
    <tr class="height0">
        <td>Row</td>
    </tr>
    <tr class="height1">
        <td>Row</td>
    </tr>
    <tr class="height2">
        <td>Row</td>
    </tr>
    <tr class="height1">
        <td>Row</td>
    </tr>
    <tr class="height0">
        <td>Row</td>
    </tr>
</table>
</div>​

div{
    height:100px; /* fixed height container */
    overflow:hidden; /* Ensures no overflowing content if JS doesn't work */
    padding:10px 15px;
    background:#777;
}
table{
    width:100%;
}
tr{
    display:none; /* all hidden by default */
}
/* different height trs */
.height0{
    height:20px;
    background:#900;
}
.height1{
    height:30px;
    background:#090;
}
.height2{
    height:40px;
    background:#009;
}​