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