Dynamiczne ukrywanie wierszy tabeli za pomocą jQuery

Próbuję zmieniać kolory tła wierszy tabeli, każda sekcja zaczyna się od tego samego koloru. Osiągnąłem to za pomocą następującego kodu:

$(document).ready(function(){ $("tbody tr.row:nth-child(even)").css("background", "#efefef"); });

Muszę też być w stanie ograniczyć liczbę wierszy (na przykład 5), które są widoczne w każdej sekcji tbody. Muszą być one możliwe do przełączenia za pomocą przycisku z zdarzeniem .click (). Czy ktoś wie, jak mogę to osiągnąć? Jedyne rozwiązania, które wymyśliłem, spowodowały przerwanie kolorów tła. Każda pomoc byłaby bardzo mile widziana!

Oto przykład struktury tabeli:

<table>
    <tbody>
        <tr>
            <td>Cell Contents</td>
            <td>Cell Contents</td>
        </tr>
        <tr>
            <td>Cell Contents</td>
            <td>Cell Contents</td>
        </tr>
        <tr>
            <td>Cell Contents</td>
            <td>Cell Contents</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td>Cell Contents</td>
            <td>Cell Contents</td>
        </tr>
        <tr>
            <td>Cell Contents</td>
            <td>Cell Contents</td>
        </tr>
        <tr>
            <td>Cell Contents</td>
            <td>Cell Contents</td>
        </tr>
    </tbody>
</table>

questionAnswers(3)

yourAnswerToTheQuestion