Динамически скрывая строки таблицы с помощью jQuery

Я пытаюсь чередовать фоновые цвета строк таблицы, каждый раздел начинается с одного цвета. Я добился этого с помощью следующего кода:

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

Мне также нужно иметь возможность ограничить количество строк (например, 5), видимых внутри каждого раздела tbody. Они должны быть в состоянии переключаться с помощью кнопки с событием .click (). Кто-нибудь знает, как мне этого добиться? Единственные решения, которые я придумала, вызвали нарушение цвета фона. Любая помощь будет принята с благодарностью!

Вот пример структуры таблицы:

<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>

Ответы на вопрос(3)

Ваш ответ на вопрос