This is a script I’ve made earlier that cab make HTML tables a little interactive. It does row color alternation, row hover effect and even highlights a row when you click on it.

I’ve re-coded the script, with designers who can’t code in mind, to make it reusable (thus using lot’s of global variables). Just follow these simple steps to integrate it into your own web page:

1. Download the script.
2. Open it up in your favorite editor and change the values of the global variables at the top (the variables must be enclosed with single or double quotes):
   • tableID: The id of the table.
   • hoverColor: The background color of a row when the mouse pointer hovers over it.
   • highlightColor: The background color of a row when you click on it.
   • clear_linkID: The ID of the link/element used for clearing all highlights on click (if present).
   • colorsDivID: The Div element which contains links that change the highlighter’s color (will be explained shortly).
   • alternate: Set to true to enable row color alternation in your table (use color1 and color2 to specify the colors)
3. Link the script with the document that contains your table and it should be interactive now.

Notes:

• To stop a row’s background color from being changed on mouse hover, just assign a background color to it in your CSS (do it on table headers for example).
• To define extra highlighter colors for the user to use, simply create a div containing links with their title attributes set to the desired color(s) (as you’ll see in the sample).
• The script currently can be used with only one table in a document.

You can check the source code of the sample I’ve made earlier if any of this still sounds unclear to you.