Code Snippet: Highlight row in Table while hovering over any cell

Mar 252015

Where I work we display a large amount of data on our web pages and it can get hard to keep track of what data is on what row, so I found a simple way to make it possible to highlight the row the mouse is over. It seems like a small thing but when your rows get to be too big it does get hard to figure out what data goes with what. To see this in action you can navigate to jsfiddle.net/Lct0w66o or you can navigate to My Test Site at hometownnerd.com/CodeTest/RowHighlighter.htm or if it fails since my domain is being a little goofy hometownnerd.mine.nu/CodeTest/RowHighlighter.htm. Basically you will have the following code to make it work:

<html>
<head>
<style type="text/css">
.highlighted td{
 background-color: lightsteelblue;
 }
table {
 border-collapse: collapse;
}
td {
 border-color:gray;
 border-style:solid;
 border-width:1px;
}
th {
 border-color:gray;
 border-style:solid;
 border-width:1px;
 background-color:lightgray;
}
</style>
<script src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 $("table").hover(function () {
 $(".highlighted").removeClass("highlighted");
 });
 $("td").not(".hirow").hover(function () {
 $(".highlighted").removeClass("highlighted");
 });
 $(".hirow").hover(function () {
 $(".highlighted").removeClass("highlighted");
 $(this).addClass("highlighted");
 });
});
</script></head>
<body>
<table>
 <thead>
 <th>Fruit</th><th>Ripe</th><th>Not Ripe</th><th>Rotten</th>
 </thead>
 <tr class="hirow">
 <td>Apples</td><td>500</td><td>250</td><td>100</td>
 </tr>
 <tr class="hirow">
 <td>Oranges</td><td>200</td><td>30</td><td>0</td>
 </tr>
 <tr class="hirow">
 <td>Pears</td><td>1500</td><td>450</td><td>300</td>
 </tr>
 <tr class="hirow">
 <td>Peaches</td><td>700</td><td>150</td><td>400</td>
 </tr>
</table>
</body>
</html>

You need to have jQuery loaded, which does most of the work, and any row that you want the highlight to be on should have a class of “hirow”.

The

.highlighted td{
 background-color: lightsteelblue;
 }

part is what sets how you want the highlighting to look by using css, I am just setting the background color to be lightsteelblue.

The

 $(document).ready(function () {

part tells the jquery code to wait to be able to run until the page has completely loaded into the browser.

The

$("table").hover(function () {
 $(".highlighted").removeClass("highlighted");
 });
part turns off the highlighting on the row if we are moving away from the table we are in by removing the class "highlighted".

The

 $("td").not(".hirow").hover(function () {
$(".highlighted").removeClass("highlighted");
});

part turns off the highlighting placed on the old row that was hover over by removing the class “highlighted”.

The

$(“.hirow”).hover(function () {
$(“.highlighted”).removeClass(“highlighted”);
$(this).addClass(“highlighted”);
});
part is the workhorse that actually highlights the row, by first removing any “highlight” classes and then applying the “highlight” class to the current row hovered over.

Hopefully this will help some people when they have this need, let me know if you have any questions.