Home jQuery

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! :)
Before you write a comment, please read this guide and our code of conduct.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.