CODEWITHSUNDEEP
javascriptjqueryhtml
Nouman Niazi
Nouman Niazi

Reputation: 371

Changing hidden to visible state of Table > TR on click

I've a table with almost 100 rows, I'm displaying 20 as default by adding a class to the tr as visible and hiding the rest of rows by the class hidden

<tbody>
    <tr class="visible"></tr>
    <tr class="visible"></tr>
    <tr class="hidden"></tr>
    <tr class="hidden"></tr>
    <tr class="hidden"></tr>
</tbody>

I've added an Add More button to display 5 rows each time the button is clicked but my jQuery logic is completely wrong, Have a look at it

$(".more-show").click(function (e)  {
    e.preventDefault();
    for (var i = 0; i<5; i++) {
        $('#ranking-table tr').each(function(i) {
            $(this).removeClass("hidden").addClass("visible");
        });
    }
});

PROBLEM

Instead of displaying 5 rows each time upon click and it has to be the very first 5 hidden rows, It's displaying all the rows by changing the class to visible

Upvotes: 3

Views: 329

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240888

You could use the selector $('#ranking-table tr.hidden:lt(5)') to select the first 5 tr elements with class .hidden. It makes use of :lt(5).

Example Here

$(".more-show").click(function (e)  {
    e.preventDefault();
    $('#ranking-table tr.hidden:lt(5)').each(function(i) {
        $(this).removeClass("hidden").addClass("visible");
    });
});

Upvotes: 1

Related Questions