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         


        

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