Alternative row colors with highlight on mouseover

JQuery tips and Tricks
User avatar
Fred
Site Admin
Posts: 491
Joined: 2010-02-15 12:10
Location: Armagh, Northern Ireland
Contact:

Alternative row colors with highlight on mouseover

Post by Fred » 2011-11-17 13:52

Recently the Interakt SB "Alternate Colors CSS" SB stopp working for me on some pages.
I couldnt be borheted trying to figure out why and decided to implement jquery to do this.

Still using the interakt CSS here is the steps.

1. Call the jquery base file
2. Call the jquery file that stores the script ( So you can reuse the script without having to add it to every page)
2. Add the class "stripeMe" to every table that needs the behaviour.

The code is simple enough

Code: Select all

$(function() {
          $(".stripeMe tr").mouseover(function(){$(this).addClass("row_highlight");}).mouseout(function()
         {$(this).removeClass("row_highlight");});
         $(".stripeMe tr:even").addClass("row_even");
         $(".stripeMe tr:odd").addClass("row_odd");
});