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.

open or close right navigation

domTableEnhance

Advertisement:
Version History
Short information
Restrictions
Requirements
Long Information
Installation notes
Usage notes
Demo URLs


Category: Javascript Version:1.0
Last page update:28.05.2004

»Download domTableEnhance.

»Launch domTableEnhance.

Version History

- 1.0 Initial release

Short information

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.

back up

Restrictions

- Do not use it for non-private, profit orientated sites.
back up

Requirements

- HTML and CSS with the required classes
back up

Long information

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.

back up

Installation Notes

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.

back up

Usage Notes

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;
}
back up

Demo pages

- Demopage
back up


Search:

 

Font:

Click to decrease fontsizeClick to increase fontsize

Text-colour:


Background:


sponsored by :

NWU

Help Onlinetools.org

Help onlinetools.org, donate via paypal

Partners

easyPHP

icons

Link to us

copy the code here:


Powered by EasyCMS