New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

Highlight Table Cells Script

Author: Dynamic Drive

Last updated: Feb 4th, 04' for ability to highlight entire table rows

Description: Give any table a "rollover" personality with this script! Using it, you can allow the cells of any given table to change color when the mouse rolls over them. This is a very powerful script that can add a little magic to any table, whatever the table is used for. The script can highlight either individual table cells (<TD>), or entire rows (<TR). You may also exclude select cells/rows from being highlighted.

Demo:

Table 1 (links): Table 2 (spreadsheet):
Dynamic Drive
JavaScript Kit
Freewarejava.com
Active-X.com
Items sold Sales
5 $100
10 $200
3 $60
12 $240
1 $20

Directions: Developer's View

Simply insert the below into the <head> section of your page:

Select All

Now, to apply the "highlight" effect to a table, simply add the following code inside the <table> tag itself, like below:

<table onMouseover="changeto(event, 'lightgreen')" onMouseout="changeback(event, 'white')">
"
"
</table>

Where "lightgreen" represents the color the cells change to when the mouse is over them, and "white" the color when the mouse moves out. Feel free to change these values to another.

To exclude any cell(s) from the rollover effect, simply give that cell an id="ignore" declaration, inserted inside the <td> tag. For example:

<table onMouseover=.... onMouseout=...>
<td id="ignore">Main Menu</td>
<td>Eggs</td>
<td>Ham</td>
</table>

If you had set the script to highlight entire table rows (by changing a variable inside the script), you can also specify the script to ignore the entire row, by adding id="ignore" inside the desired <TR> tag:

<table onMouseover=.... onMouseout=...>
<tr id="ignore">
<td>Main Menu</td>
<td>Eggs</td>
<td>Ham</td>
</tr>
</table>