jQuery — highlighting the row of a table on hover

Simple jQuery code to highlight a row color on hover when you hover over it. This is simple yet its so important for the user to be able to clearly see what they are selecting especially if your table row have a lot of columns.

HTML:

 <table id="table1">
<tr>
<td>
Title
</td>
</tr>
<tr>
<td>
hello world 1
</td>
</tr>
<tr>
<td>
hello world 2
</td>
</tr>
<tr>
<td>
hello world 3
</td>
</tr>
</table>

JQuery:

$(document).ready(function () {
$('#table1 tr').not(':first').hover(function () {
$(this).css("background", "lightyellow");
}, function () {
$(this).css("background", "");
});
});

Note that , adding the .not(‘:first’) in the code above allows it to not highlight the first row, which usually is the header row. Normally you wouldn’t want to highlight that row.

See it on JSFiddle here.

Show your support

Clapping shows how much you appreciated Jobin Scaria’s story.