0

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

创建表时，所有行都是不可见的，现在我想根据容器的高度进行计算，以找出容器内应该出现多少行。它可能是前 15 行或前 17 行（因为某些行的高度更大）。

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

4

4 回答 4

1

您可以使用jQuery.innerHeight和jQuery.outerHeight函数获取浏览器计算的高度。所以你可以先得到容器的计算高度。然后您可以遍历行并添加它们的计算高度，直到总和大于容器的计算高度等等。

希望这可以帮助。

于 2012-07-30T19:39:25.643 回答
1

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

http://jsfiddle.net/yvAtW/

JS

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

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

HTML

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

CSS

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;
}​
于 2012-07-30T20:25:36.133 回答
0

遍历行，求和它们的高度。一旦超过 500 行，就取除最后一行之外的行集。显示那些。使用某种标记（可能是变量或数据注释）来跟踪您所在的位置。

于 2012-07-30T19:39:29.497 回答
-1

也许你可以做这样的事情：

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

    if($(table).css('height') >= $('#container').css('height'))
        fits = false;
}
于 2012-07-30T19:39:54.897 回答