How To Highlight Table Row OnMouseOver

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="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script type='text/javascript'>
$(document).ready(function(){

//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');
    }
}
);

});
</script>

   

That's it! :)

Tweet

For FREE programming tutorials, click the red button below and subscribe! :)

SUBSCRIBE to Receive Ninja Codes