jQuery – Table row highlight

My first task that I had set out to do was to replace this table row highlighter that was found from somewhere on the web to be using jquery instead. I found that this task to be extremely easy with jquery. The syntax are as follows:

First ofcourse download the jquery library from http://jquery.com/ and include it into your html.

Then do the following:

jQuery:

/*basically toggles the hoverHighlited class everytime the mouse enters the row */
$(function(){
$('tr#highlight_row').hover(function(){
$(this).toggleClass('hoverHighlighted')
});

});

css:

.hoverHighlighted{
background-color:#DFE6EB !important;
}

html:

some content

What this will do is every time the mouse enters or leaves the row it will toggle the css class to have a highlighting effect.

Cheers,
Thusjanthan Kubendranathan

Leave a Reply