How to display 5 more rows of a table on the click on a button using jQuery

Question

I pre-load a table with all of its rows. However, I only want to show only the top 10 rows that are within the tag and now every <

Answer 1

1) If you need the tr tags not only with the tbody tag then rewrite your jquery select to

$("#internalActivities > table tr");

2) You can get the number of rows and use that count in the slice

var $records = $("#internalActivities tr");
$records.slice($records.length - 10, $records.length).hide();

3) Check the count of hidden rows in the seeMoreRecords click event handler

if ($("#internalActivities tr:hidden").length === 0) {
    $("#seeMoreRecords").hide();
}

4) Check the count of shown rows

if ($("#internalActivities tr").not(":hidden").length <= 10) {
    $("#seeLessRecords").hide();
}