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：如何計算在一個容器內顯示的行數

回答

相關問題