Alternating Rows

JavaScriptSource Staff Sep 7, 2007

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://www.javascriptsource.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>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details