JQuery：如何计算在一个容器内显示的行数

有点难以解释，但让我试试：
我想在容器中放一张桌子。这个容器有一个固定的高度，比如说500px，桌子比较长，比如说2100，每一排的高度可以不同。JQuery：如何计算在一个容器内显示的行数

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

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

2012-07-30 neo

你一个尝试的一件事，首先降低第一排的不透明度为0.1，以便它近了无形，把它附加上去重新在身体中，使用jQuery'height（）'找出它的高度，然后将不透明度恢复为1并将其附加到容器中。计算下一行的高度（如果它仍然可以放在容器内），追加并继续，直到不可能。 – SexyBeast 2012-07-30 19:38:43

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

希望这会有所帮助。

来源

2012-07-30 19:39:25

迭代通过总计它们高度的行。一旦你达到500以上，除了最后一行以外的其他行。显示那些。使用某种标记，可能是变量或数据注释来跟踪您所处的位置。

来源

2012-07-30 19:39:29

-1

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

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

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

来源

2012-07-30 19:39:54

这不解决“呆了一段时间，一段时间后，获取下一个行集”的一部分，但这里有一个简单的计算高度是显示相应的行。

http://jsfiddle.net/yvAtW/

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-30 20:25:36 DACrosby

JQuery：如何计算在一个容器内显示的行数

回答

相关问题