jquery - jQueryを使用してボタンをクリックすると、テーブルのさらに5行を表示する方法

Question

すべての行をテーブルにプリロードします。<tbody>ただし、タグ内の上位 10 行のみを表示したいだけで、現在<tr>はテーブル内のすべての行が表示されています。

だからここに私がこれまでにやったことがあります：

var trs =  $("#internalActivities > table > tbody > tr");
trs.hide();
trs.slice(0, 9).show(); 

$("#seeMoreRecords").click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr:hidden").slice(0, 10).show();          
});

$("#seeLessRecords").click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr").slice(9, 19).hide();          
});

上記のコードの問題は次のとおりです。

1. タグ<tr>が付いた のみを検索します。<tbody>
2. [非表示] ボタンでは、すべてではなく、下から 10 行を削除する必要があります。
3. seeMoreRecordsそれらがすべて表示されている場合は、ボタンを非表示にする必要があります。
4. 最小行が表示されている場合は、seeLessRecordsボタンを非表示にします。

私のスクリプトの最終的な外観は、デフォルトで 10 行を表示し、ユーザーが [さらに見る] をクリックすると、さらに 10 行が表示されます。したがって、一度に 10 ずつ増分し、最大に達すると [もっと見る] ボタンを非表示にします。See less は、表示される行が 10 行を超える場合にのみ表示されます。