Blog Archive

jQuery change HTML Table Row Color on hover

Lets say you have an application where an user is required to click on a Table row for some type of action. It's always a good practice to change the row color on mouse hover to make it easy for the user to see which row is getting selected. Here is how to do it using jQuery hover() function.


jquery row color change on hover

Source containing the HTML table - index.html

<html>
<head>
<title>jQuery Table - Change Row Color on Hover</title>

<link
 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
 rel="stylesheet" type="text/css" />
<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
 type="text/javascript">
</script>
<script
 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
 type="text/javascript">
</script>
<script type="text/javascript" src="app.js"></script>

<style type="text/css">

table {
 border: 1px black solid;
 border-collapse: collapse;
}

th {
 background-color: #8b8b83;
 color: white;
 text-align:left;
 padding-left: 10px;
}

tr {
 background-color: white;
 margin: 1px;
}

td {
 padding-left: 10px;
 text-align:left;
}

.shaded {
 background-color: #eeeee0;
}

.selected {
 background-color: #cdcdc1;
}

</style>
</head>
<body>
 <table id="myTable">
  <tbody>
   <tr>
    <th>Country Code</th>
    <th>Country Name</th>
    <th>Continent</th>
    <th>Region</th>
   </tr>
   <tr>
    <td>ABW</td>
    <td>Aruba</td>
    <td>North America</td>
    <td>Caribbean</td>
   </tr>
   <tr>
    <td>AFG</td>
    <td>Afghanistan</td>
    <td>Asia</td>
    <td>Southern and Central Asia</td>
   </tr>
   <tr>
    <td>AGO</td>
    <td>Angola</td>
    <td>Africa</td>
    <td>Central Africa</td>
   </tr>
   <tr>
    <td>AIA</td>
    <td>Anguilla</td>
    <td>North America</td>
    <td>Caribbean</td>
   </tr>
   <tr>
    <td>ALB</td>
    <td>Albania</td>
    <td>Europe</td>
    <td>Southern Europe</td>
   </tr>
   <tr>
    <td>AND</td>
    <td>Andorra</td>
    <td>Europe</td>
    <td>Southern Europe</td>
   </tr>
   <tr>
    <td>ANT</td>
    <td>Netherlands Antilles</td>
    <td>North America</td>
    <td>Caribbean</td>
   </tr>
   <tr>
    <td>ARE</td>
    <td>United Arab Emirates</td>
    <td>Asia</td>
    <td>Middle East</td>
   </tr>
   <tr>
    <td>ARG</td>
    <td>Argentina</td>
    <td>South America</td>
    <td>South America</td>
   </tr>
   <tr>
    <td>ARM</td>
    <td>Armenia</td>
    <td>Asia</td>
    <td>Middle East</td>
   </tr>
  </tbody>
 </table>
</body>
</html>

jQuery source for the application - app.js

$(document).ready(function() {

 $("table#myTable tr:nth-child(even)").addClass("shaded");

 $("table#myTable tr").not(':first').hover(
     function () {
       $(this).addClass("selected");
     }, 
     function () {
       $(this).removeClass("selected");
     }
  );
 
});

How does it work?

Basically it finds the Table by it's id and then if its not the first Row add the style "selected" also remove the style when the mouse moves away.

.hover( handlerIn(eventObject), handlerOut(eventObject) )

  • handlerIn(eventObject)     
    • A function to execute when the mouse pointer enters the element.
  • handlerOut(eventObject)  
    • A function to execute when the mouse pointer leaves the element.