Question

I am trying to alternate background colors of table rows, each section starting with the same color. I have achieved this with the following code:

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

I also need to be able to limit the number of rows (5 for example) that are visible inside each tbody section. These need to be able to be toggled with a button with a .click() event. Does anyone know how I could achieve this? The only solutions I have come up with caused the background colors to break. Any help would be greatly appreciated!

Here is an example of the table structure:

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

Answer 1

This should do the trick:

$(function() {
    $('#showAll').click(function() {
        $('table > tbody').each(function() {
            $(this).children('tr:gt(4)').toggle();
        });
        $("tr:visible").filter(':odd').css("background", "#efefef").end()
            .filter(':even').css("background", "#ffffff");
    }).click();
});

Edited to clean up code (inspired by @karim79’s answer).