domTableEnhance

What is domTableEnhance?

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). Furthermore, you can click on a row to highlight it and click it again to take the highlight away. 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.

How to install domTableEnhance

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.

How to use domTableEnhance

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';
var activeClass='enhancedtableactive';

Example:

CDs for sale
Total: £130
Artist Album Price
Ladytron 604 £10
New Order Movement £40
The Mao Tse Tung Experience Revlover £20
Die Krupps Volle Kraft vorraus £40
Einstuerzende Neubauten Haus der Luege £20
DVDs for sale
Total: £130
Artist Album Price
Fritz Lang Metropolis £10
David Lynch Blue Velvet £40
Quentin Tarantino Pulp Fiction £20
Ridley Scott Alien + Aliens £40
Tim Burton Big Fish £20
<table class="enhancedtable" summary="The following CDs are for sale">
<caption>CDs for sale</caption>
<colgroup>
   <col width="40%">
   <col width="40%">
   <col width="20%">
</colgroup>			   
<tfoot>
	<th scope="row" colspan="2">Total:</th>
	<td>£130</td>
</tfoot>
<thead>
	<tr>
		<th scope="col">Artist</th>
		<th scope="col">Album</th>
		<th scope="col">Price</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Ladytron</td>
		<td>604</td>
		<td>£10</td>
	</tr>
	<tr>
		<td>New Order</td>
		<td>Movement</td>
		<td>£40</td>
	</tr>
	<tr>
		<td>The Mao Tse Tung Experience</td>
		<td>Revlover</td>
		<td>£20</td>
	</tr>
	<tr>
		<td>Die Krupps</td>
		<td>Volle Kraft vorraus</td>
		<td>£40</td>
	</tr>
	<tr>
		<td>Einstuerzende Neubauten</td>
		<td>Haus der Luege</td>
		<td>£20</td>
	</tr>
</tbody>
</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;
}
.enhancedtableactive{
	background:#fc6;
}