domTableEnhance is a Javascript that enhances tables
by adding an alternating colour to each row, and a hover state for the
table rows.
You are seeing this very light version of the page, as you are using an outdated
browser!
Onlinetools.org is done in XHTML 1.0 and supports CSS 2.0, please upgrade your
browser if you want a better version of this site.
Thank you, please help us developers keep up with the industry rather than patching our code for outdated applications.
domTableEnhance is a Javascript that enhances tables by adding an alternating colour to each row, and a hover state for the table rows.
All the visuals are defined via CSS classes, which means you don't need to know any Javascript to use it.
domTableEnhance is a script that turns every table with a special class into an enhanced one. The tables enhanced by domTableEnhance will have an alternate row colour and have a rollover on each row that includes cells (header rows won't get a rollover). domTableenhance adds these effects by applying classes to the rows, which means that you don't need to know any Javascript to change the look.
To install domTableEnhance, simply call it in the head of your HTML document:
<script type="text/javascript" src="domtableenhance.js"></script>
domTableEnhance comes with its own onload call, if you want to use it together with other scripts, you need to remove the window.onload=domTableEnhance; line and call the function domTableEnhance() when you load the page.
domTableEnhance uses no global variables and is only one function.
domTableEnhance checks if the browser is capable of applying classes and only does so if that is the case.
To use domTableEnhance, you must add a class called enhancedtable to the tables you want to change. domTableEnhance adds the class enhancedtablecolouredrow to each second row of the table and enhancedtablerowhover when the mouse hovers over the row. To change these, and the class the tables need to sport, you can alter the following variables.
var tableClass='enhancedtable'; var colourClass='enhancedtablecolouredrow'; var hoverClass='enhancedtablerowhover';
Example
<table class="enhancedtable" summary="The following CDs are for sale"> [...] </table> CSS: .enhancedtable{ border-collapse:collapse; border:1px solid #000; } .enhancedtable td,.enhancedtable th { border:1px solid #000; padding:5px; } .enhancedtablecolouredrow{ background:#ddd; } .enhancedtablerowhover{ background:#ffc; }