Table Row Color Change On Mouseover

When tables are very wide, the eye may wander up or down onto another row.

In a previous article, Colorizing Tables, I discussed colorizing alternate rows of the table to help the reader's eye focus on the correct data. In this article, I'll show you how to change the background color of an entire row when the mouse pointer hovers over it.

Here is an example of the hover color change. Hover over a table row to see the effect.

Implementing Table Row Hover Background Color Change

First, create a table. When the table has been created, add an onmouseover attribute and an onmouseout attribute to the TR tag of each table row that will change color when the mouse pointer hovers over it. Example:

<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">

Here is the source code for the complete table of the above example.

<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th></th>
<th>Water</th>
<th>Air</th>
<th>Fire</th>
<th>Earth</th>
</tr>
<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
<td>Spring thunderclouds</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>No</td>
</tr>
<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
<td>Roasting chestnuts</td>
<td>No</td>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
<td>Winter snowbanks</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
<td>Ice cream on a hot summer day</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</table>

JavaScript is used to enable the hover background color change.

<script type="text/javascript">
// Specify the normal table row background color
//   and the background color for when the mouse 
//   hovers over the table row.

var TableBackgroundNormalColor = "#ffffff";
var TableBackgroundMouseoverColor = "#9999ff";

// These two functions need no customization.
function ChangeBackgroundColor(row) { row.style.backgroundColor = TableBackgroundMouseoverColor; }
function RestoreBackgroundColor(row) { row.style.backgroundColor = TableBackgroundNormalColor; }
</script>

The JavaScript has two places to customize. Specify the normal background color of the table and the background color when the mouse hovers over a table row.

Put the JavaScript anywhere on the web page that JavaScript can run, in the HEAD or BODY area, above or below the table.

You're now good to go.

When your mouse pointer hovers over a table row, the row's background color changes. When the pointer moves off the row, the row's background color returns to normal.

Will Bontrager