jQuery Zebra Stripes

Traditionally I added these tiger/zebra stripes for alternate row colours within PHP but with jQuery we can accomplish the same with the following. I had a little difficulty getting the rollover to work initially until I worked out that I needed to combine the .mouseover and .mouseout onto one line and also remove the unneeded classes when each one fires:

         $(document).ready(function() {
            $(‘tr.rsRow:odd’).addClass(‘rsRowOdd’);
                        $(‘tr.rsRow:even’).addClass(‘rsRowEven’);
                        $(‘tr.rsRow:odd’).mouseover(function() {
                $(this).removeClass(‘rsRowOdd’);
                $(this).addClass(‘rsRowOver’);
                }).mouseout(function() {
                $(this).removeClass(‘rsRowOver’);
                 $(this).addClass(‘rsRowOdd’);
                });
            $(‘tr.rsRow:even’).mouseover(function() {
                $(this).removeClass(‘rsRowEven’);
                $(this).addClass(‘rsRowOver’);
                }).mouseout(function() {
                $(this).removeClass(‘rsRowOver’);
                $(this).addClass(‘rsRowEven’);
                });  
            });

Obviously we need some CSS for rsRowEven rsRowOver and rsRowOdd:

.rsRowOver {background-color: #eea;}
.rsRowOdd{background-color: #eee;}
.rsRowEven{background-color: #fff;}