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;}