使用jquery改變「n」行的可見性

Question

我有如下的表，「n」行數。

<table> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
    <tr><td>4</td></tr> 
    <tr><td>5</td></tr> 
    <tr><td>6</td></tr> 
    <tr><td>7</td></tr> 
    <tr><td>8</td></tr> 
    <tr><td>9</td></tr> 
    <tr><td>10</td></tr> 
</table> 
    <span class="more">Show more</span> 

最初在頁面加載時，我只想顯示兩行。如果我點擊「更多」鏈接，我只想看到或顯示3更多行，每次點擊。

如何用jquery得到這個。示例代碼here. 在此先感謝。

Answer 1

開始通過隱藏除CSS前兩個tr之外的所有內容：

table tr {display:none;} 
table tr:first-child, table tr:nth-child(2) {display:block}​ 

然後得到最後一個可見TR的指數，並顯示在未來三年等

$('.more')​.on('click', function() { 
    var vis = $('table tr:visible').last().index(); 
    $('table tr').slice(vis, vis+4).show(); 
});​ 

FIDDLE

Answer 2

您可以隱藏使用CSS3 nth-child選擇剩餘<tr>：

​tr:nth-child(n+4) { 
    display:none; 
}​ 

然後使用JQuery上顯示更多的鏈接的點擊向他們展示：

​$('.more')​.click(function() { 
    $('tr').show(); 
});​ 

例子：http://jsfiddle.net/viralpatel/BNrKn/