How To Highlight Table Row OnMouseOver

Photo of Mike Dalisay
Modified Sunday, October 10, 2010
by - @ninjazhai
I'm just gonna make a continuation of my previous post. We are going to:

1. Highlight the table row on mouse over.
2. Show its original color on mouse out.

Just add the following JavaScript code before the </body> tag:

<script src="">
<script type='text/javascript'>

//we will select the odd and even row
//to highlight it on mouse over
$('.odd-row, .even-row').hover(
function () {
    $(this).css('background-color', '#CFF');
function () {
    //then get the class name to identify
    //and show its original color
    var c_name = $(this).attr('class');
    if(c_name == 'odd-row'){
        $(this).css('background-color', '#E3E3E3');
    }else if(c_name == 'even-row'){
        $(this).css('background-color', '#D1D1D1');



That's it! :)
For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.