I found some sample code on
Jay Skript And The Domsters (a site demoing some tricks using JavaScript, CSS and the Document Object Model [aka DHTML]) that will automatically add alternating table row styles to all tables on a page.
I really liked the idea (I've maintained one too many non-dynamic, monster-sized tables that needed to have all their row colors manually adjusted whenever a new row was added in the middle), but the existing code wasn't real-world ready. It basically relies on a site using all-CSS layout, with pages fully under the control of the developer ?- i.e. not the kind of environment I often work in. Some problems were that it screwed up royally with sites using tables for layout (due to it running multiple times over nested tables), it didn't allow applying the styling selectively, and it didn't allow specifying a parent object as a starting point for walking the DOM (which helps to speed it up).
As a result, I've adapted it, adding functionality and some supporting functions (and a few comments). In current form, it will run on all tables with class="striped" within a designated parent element (e.g. a page's content area).
Despite the fact that in its entirety this is a significant block of code, all the supporting functions are written with reusability strongly in mind (in fact, you may find use for the supporting functions even if you don't need the table processing).
Code:<style>
tr.alt-bg {background-color:#b1c2de;}
</style>
<script>
// Add style to every other row in tables with class="striped" within parent id
function stripeTables() {
var parentObject = document.getElementById("content"); // Parent ID
var tables = getElementsByClassName(parentObject, "table", "striped");
for (var i = 0; i < tables.length; i++) {
var oddRow = false;
var rows = tables[i].getElementsByTagName("tr");
for (var j = 0; j < rows.length; j++) {
if (oddRow == true) {
oddRow = false;
} else {
addClass(rows[j], "alt-bg");
oddRow = true;
}
}
}
}
/* Return array of all elements with specified class name, limited by parent object
(use "document" for full page) and html tag (use "*" for all) */
function getElementsByClassName(parentObject, tagName, className) {
var elements = parentObject.getElementsByTagName(tagName);
var returnElements = new Array();
for (var i = 0; i < elements.length; i++) {
if (hasClass(elements[i], className)) {
returnElements.push(elements[i]);
}
}
return returnElements;
}
// Check if a class is among the classes used by an element
function hasClass(element, className) {
var regEx = new RegExp('\\b' + className + '\\b', "i")
return element.className.match(regEx);
}
// Add class to element (preserves any existing classes)
function addClass(element, value) {
element.className += (element.className) ? (' ' + value) : value;
}
// Add function to page onLoad event (preserves any existing function calls in body onLoad, etc)
function addLoadEvent(func) {
var oldOnload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldOnload();
func();
}
}
}
addLoadEvent(stripeTables);
</script>
For help with manually setting alternating table row styles with the help of a regular expression, see:
Regex search & replace to apply style to alternating TR rows.
Also note that I would not recommend using the above JavaScript with dynamically created tables, due to the ease of setting alternating styles in such cases.
Stumble It!
Tweet This
Bookmark on Delicious
Share on Facebook
Share on MySpace