Dynamically hiding table rows with jQuery

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

Scrolling. Set the height of the table to what 5 rows will fit in, and then use css

overflow: scroll; :D

Answer 2

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

Answer 3

This does it (tested):

var rowLimit = 5;
$(document).ready(function() {
     $('button').click(function() {
        //hide everything after the rowLimit row
        $('table > tbody > tr:gt(' + (rowLimit - 1) + ')').toggle();
     });
 });

The key is in the gt selector

To prevent your row styles from vanishing, put them in a CSS class and use addClass and removeClass instead to apply them, bearing in mind that if they're not in a class, then they don't exist :)