テーブルをクリックして詳細を表示する

Question

私はJQueryに援助が必要な場所を持っています。テーブルの行をもっと表示するようにしていますが、最初は最初に10を表示してからロードします10はその1と1時間に現時点では一度に：

<script type="text/javascript"> 
var curr = 0; 
var rowN = $('.table tr').length; 

$('.table tr').eq(curr).siblings().hide(); // hide all but current one 

$('a.load_more').on('click',function(e){ 
    e.preventDefault(); // prevent default anchor behavior  
    $('.table tr').eq(++curr).show(); 
}); 

</script> 

私は、現在を変更しようとしたが、それは単に、特定の行番号から始まり、私はそれを見せたいので、1行ありません最初の10回クリックしてから次の10回などをロードします。

Answer 1

グローバル変数の使用を避けるより良い解決策は、表示された行にクラスを配置することです。そのクラスを使用して、最後に表示された要素のインデックスを検索し、次の要素のグループを表示できます。それはクリックあたりさらに2行を表示しますが、必要に応じて、これは簡単に修正することができる上記のサンプルで

$('table tr:first').addClass('active'); 
 

 
$('a.load_more').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var $rows = $('table tr'); 
 
    var lastActiveIndex = $rows.filter('.active:last').index(); 
 
    $rows.filter(':lt(' + (lastActiveIndex + 3) + ')').addClass('active'); 
 
});

table tr { display: none; } 
 
table tr.active { display: table-row; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr><td>Row 1</td></tr> 
 
    <tr><td>Row 2</td></tr> 
 
    <tr><td>Row 3</td></tr> 
 
    <tr><td>Row 4</td></tr> 
 
    <tr><td>Row 5</td></tr> 
 
    <tr><td>Row 6</td></tr> 
 
    <tr><td>Row 7</td></tr> 
 
    <tr><td>Row 8</td></tr> 
 
    <tr><td>Row 9</td></tr> 
 
    <tr><td>Row 10</td></tr> 
 
</table> 
 

 
<a href="#" class="load_more">Load more</a>

：これを試してみてください。

Answer 2

これは役に立ちますか？ fiddle here

<table> 
    <tr> 
    <td>1</td> 
    </tr> 
    <tr> 
    <td>1</td> 
    </tr> .............. 
</table> 


$(document).ready(function() { 

    var pagelength = 10; 
    var pageIndex = 1; 
    //hide all tr greater than page length 
    var selector = "tr:gt(" + pagelength + ")"; 
    $(selector).hide(); 

    $("#loadMore").click(function(){ 
    var itemsCount = ((pageIndex * pagelength) + pagelength); 
    var selector = "tr:lt(" + itemsCount + ")"; 
    $(selector).show(); 
    pageIndex++; 
    }); 

});