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

Answer 2

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

Answer 3

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

overflow: scroll; :D