How To Highlight Table Row on Hover

In this post, we’ll highlight table row on hover. Here’s how it will work: Highlight the table row on hover. 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! 🙂