{"id":321,"date":"2013-10-03T20:40:07","date_gmt":"2013-10-03T12:40:07","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=321"},"modified":"2018-09-04T13:06:51","modified_gmt":"2018-09-04T05:06:51","slug":"how-to-highlight-html-table-rows-when-mouse-cursor-hovers-over-them-with-jquery","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-highlight-html-table-rows-when-mouse-cursor-hovers-over-them-with-jquery\/","title":{"rendered":"How to highlight HTML table rows when mouse cursor hovers over them with jQuery"},"content":{"rendered":"

When I have to look at table of records, I always like to hover my mouse over the row that I am looking at so that I can focus on the details. <\/p>\n

In addition, to facilitate my reading of that row, I will want that row to be highlighted as well. <\/p>\n

This post describes my exploration to highlight HTML table rows with jQuery.<\/p>\n

The css class to style the highlighted row<\/h2>\n

I first define a css class, rowHighlight<\/code>, to be used for highlighting the hovered table rows:<\/p>\n

\r\n.rowHighlight {\r\n    background-color: #f1faff;\r\n}\r\n<\/pre>\n
The jQuery codes for registering interests in mouse hovering event<\/h2>\n
I then code the jQuery codes to register listeners to the HTML table rows. These listeners will be notified when my mouse cursor hovers over and away from the table rows. <\/p>\n
When the cursor hovers over the rows, I add the CSS class, rowHighlight<\/code>, to the table rows. When the mouse cursor hovers away from the table rows, I remove the css class from the table rows.<\/p>\n
\r\n$(document).ready(\r\n\tfunction () {\r\n\t\t$('tr').hover(\r\n\t\t\tfunction(event) {\r\n\t\t\t\t$(this).addClass('rowHighlight');\r\n\t\t\t}\r\n\t\t\t, \r\n\t\t\tfunction(event) {\r\n\t\t\t\t$(this).removeClass('rowHighlight');\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n);\r\n\r\n<\/pre>\n
The entire HTML document<\/h2>\n
The web page is pretty easy to construct - I head over to my html reference<\/a> and did a few copying and pasting. I then add the CSS and jQuery codes that I had prepared earlier in the HTML head section.<\/p>\n
\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN" \r\n    "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml" xml:lang="en" lang="en">\r\n<head>\r\n    <title>\r\n           HTML table rows highlighted with jQuery when \r\n           mouse cursor hovers over them\r\n    <\/title>\t\r\n    <script type="text\/javascript" src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js"><\/script>\r\n\t<script type="text\/javascript">\r\n\t\t$(document).ready(\r\n\t\t\tfunction () {\r\n\t\t\t\t$('tr').hover(\r\n\t\t\t\t\tfunction(event) {\r\n\t\t\t\t\t\t$(this).addClass('rowHighlight');\r\n\t\t\t\t\t}\r\n\t\t\t\t\t, \r\n\t\t\t\t\tfunction(event) {\r\n\t\t\t\t\t\t$(this).removeClass('rowHighlight');\r\n\t\t\t\t\t}\r\n\t\t\t\t);\r\n\t\t\t}\r\n\t\t);\r\n\t<\/script>\r\n\t<style type="text\/css">\r\n\t\t.rowHighlight {\r\n\t\t\tbackground-color: #f1faff;\r\n\t\t}\r\n\t<\/style>\r\n<\/head>\r\n<body>\r\n    <table>\r\n\t<tr>\r\n\t\t<th>Fruit<\/th>\r\n\t\t<th>Color<\/th>\r\n\t<\/tr>\r\n\t<tr>\r\n\t\t<td>Apple<\/td>\r\n\t\t<td>Red<\/td>\r\n\t<\/tr>\r\n\t<tr>\r\n\t\t<td>Kiwi<\/td>\r\n\t\t<td>Green<\/td>\r\n\t<\/tr>\r\n\t<tr>\r\n\t\t<td>Orange<\/td>\r\n\t\t<td>Orange<\/td>\r\n\t<\/tr>\r\n\t<\/table>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\n   See this proof of concept<\/a>\n<\/div>\n\n