The JavaScript Source: Miscellaneous : Alternating Rows

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

General

Make your tabular data nice and readable. Just add some colors to this script and - voila! - no hassle alternate row coloring. Your data stays pristine, your output is improved, and your markup barely changes.

Name	Extension	Start date
Bloggs, Fred	1353	08/18/2003
Turvey, Kevin	2342	02/05/1979
Mbogo, Arnold	2755	09/08/1998
Shakespeare, Bill	3211	12/11/1961
Fitz, Marvin	5554	05/22/1995

Notes

Created by: Arc90, Inc.
Web Site: http://arc90.com/
Posted: September 7, 2007

Two way to style the rows:

In the style sheet:

To do this, in the <table> tag, add class="arc90_altrows-..." and a keyword as an attribute of your table tag, e.g.,

class="arc90_altrows-Brown"

Then, in your stylesheet, reference the created classes (note the number at the end of each classname):

.arc90_altrowsGreen0 { background-color: #D0997E; }
.arc90_altrowsGreen1 { background-color: #E5C6B7; }
.arc90_altrowsGreen2 { background-color: #F3E4DD; }

In the <table> tag:

Use either a THEMENAME or 2 or more COLORs separated by dashes

Theme: arc90_altrows-THEMENAME
Colors: arc90_altrows-COLOR1-COLOR2-COLOR3

e.g.,
<table class="arc90_altrows-C67952-F1DDD5"

Further details can be found on the author's Web site

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: arc90_altrows.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Arc90, Inc. | http://arc90.com/ */
/* Globals */
var arc90_isIE = document.all? true: false;

function arc90_altrows() {
	var parts = ['TABLE', 'THEAD', 'TFOOT', 'TBODY'];

	for (var t = 0, r = parts.length; t < r; t++) {
		var T = document.getElementsByTagName(parts[t]);

		// create the alterNation
		for (var i = 0, l = T.length, c = 0; i < l; i++) {
			var tc = T[i].className;
			var a = tc.indexOf('altrows');
			var n = tc.indexOf('norows');
			if (n >= 0) {
				T[i].className = 'arc90_norows';
				var R = T[i].getElementsByTagName('TR');
					for (var j = 0, m = R.length; j < m; j++) {
						R[j].style.background = '';
						R[j].className = 'arc90_norows';
					}
			} else if (a >= 0 ) {
				var c = T[i].className.slice(a), s = c.indexOf(' '), x = null, z = '', cn = '';
				c = T[i].className.slice(a, s > 0? s: T[i].className.length).split('-');
				if (c.length == 2) { // theme
					cn = c[1];
				} else if (c.length > 2) { // rotating colours
					cn = c.slice(1);
					x = c.length - 1;
					z = -1;
				}

				// now go through every sub row and assign alternating row colours
				R = T[i].getElementsByTagName('TR');
				for (var j = 0, m = R.length; j < m; j++) {
					n = R[j].className.indexOf('norows');
					if (n >= 0)
						continue;
					z = (x != null && z+1 < x? z+1: x != null? 0: j % 2); // either the rotating row number or theme alternation
					if (x == null) R[j].className = 'arc90_altrows'+cn+''+z;
						else R[j].style.backgroundColor = '#'+ cn[z];
				}
			}
		}
	}
}

/* Events */
function arc90_isString(o) { return (typeof(o) == "string"); }

function arc90_isNumeric(o) { return (typeof(parseFloat(o).toString() == 'NaN'? 'xxx': parseFloat(o)) == "number" && parseFloat(o) != ''); }

function arc90_addEvent(e, meth, func, cap) {
	if (arc90_isString(e))	e = document.getElementById(e);

	if (e.addEventListener){
		e.addEventListener(meth, func, cap);
    	return true;
	}	else if (e.attachEvent)
		return e.attachEvent("on"+ meth, func);
	return false;
}

/* Nodes */
function arc90_newNode(t, i, s, x, c) {
	var node = document.createElement(t);
	if (x != null && x != '') {
		var n = document.createTextNode(x);
		node.appendChild(n);
	}
	if (i != null && i != '')
		node.id = i;
	if (s != null && s != '')
		node.className = s;
	if (c != null && c != '')
		node.appendChild(c);
	return node;
}

/* Onload */
arc90_addEvent(window, 'load', arc90_altrows);

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

.arc90_altrows-Brown {
  font-family: Georgia, serif;
}

.arc90_altrowsBrown0 {
  background-color: #D0997E;
}

.arc90_altrowsBrown1 {
  background-color: #E5C6B7;
}

.arc90_altrowsBrown2 {
  background-color: #F3E4DD;
}

.arc90_altrows-Brown td {
  font-size: .85em;
		padding: .5em;
}

.arc90_altrows-Brown th {
		border: 1px solid #BF5623;
		padding: .5em;
		color: #FFF;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="arc90_altrows.js"></script>

Body

Paste this code into the BODY section of your HTML document


			<table class="arc90_altrows-Brown" summary="Acme Employee List">
				<tr>
					<th>Name</th>
					<th>Extension</th>
					<th>Start date</th>
				</tr>
				<tr>
					<td>Bloggs, Fred</td>
					<td>1353</td>
					<td>08/18/2003</td>
				</tr>
				<tr>
					<td>Turvey, Kevin</td>
					<td>2342</td>
					<td>02/05/1979</td>
				</tr>
				<tr>
					<td>Mbogo, Arnold</td>
					<td>2755</td>
					<td>09/08/1998</td>
				</tr>
				<tr>
					<td>Shakespeare, Bill</td>
					<td>3211</td>
					<td>12/11/1961</td>
				</tr>
				<tr>
					<td>Fitz, Marvin</td>
					<td>5554</td>
					<td>05/22/1995</td>
				</tr>
			</table>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos