Categories
Building a better Zebra Table
Today while surfing I stumbled onto this site:
Stripe your tables the OO way.After reading it, I realized that it was hopelessly overcomplicated for what it needed to do, so I thought I'd write a better one. I borrowed the style sheet and table from his page, and wrote the following javascript:
function stripeTable(tableId)
{
// Get a reference to the table.
var theTable = document.getElementById(tableId);
if (theTable)
{
// Get all table rows inside the passed table.
var tableRows = theTable.getElementsByTagName('tr');
for (var i = 0; i < tableRows.length; i++)
{
// If its an alternating row, set the alternating class
if ((i % 2) == 0)
{
tableRows[i].className += " alt";
}
// These two events are mostly for old browsers (IE6 specifically) that cannot handle using CSS Hover on elements other than the anchor tag.
tableRows[i].onmouseover = function ()
{
this.oldClassName = this.className;
this.className += " over";
};
tableRows[i].onmouseout = function () { this.className = this.oldClassName; };
}
return true;
}
else
{
return false;
}
}
You can see this script in action here. This is far simpler way to do the same thing, no prototype or jquery needed. Nothing fancy, just simple javascript.
Happy Coding.
Bookmark/Search this post with:
© Copyright 2008 - GEEKS NOT NERDS - 
The onmouseout is better out being something like
this.className = this.className.replace(/ over/, '');
that way you cover the case that something else changes the class further while you are hovering over. Yeah, it's a small possibility, but it's just safer :)
And striping a table is a task simple enough that doesn't need a framework behind, but if you are already using one, take advantage of it!
My ZebraTable script for Prototype is just this:
var ZebraTable = function(element, options) {options = Object.extend({ odd: "odd", even: "even", hover: "hover" }, options || {});
$(element).getElementsBySelector("tbody tr").each(function(row, index) {
row.addClassName(index % 2 == 0 ? options.even : options.odd);
row.observe("mouseover", function() { row.addClassName(options.hover) });
row.observe("mouseout", function() { row.removeClassName(options.hover) });
});
};
To which I just do
new ZebraTable("myTable");and voila, it's done, in 6 simple lines of code :)(It also takes into account tables that have thead and tfoot, and ignores rows inside those, which is usually the case)
Cool script, I've had to tackle this problem myself (http://ambethia.com/2006/11/22/zebra-tables-revisited/), but I found the need to pass in an ID for every table to stripe cumbersome. Here was my solution:
function ASZebraStripes(cssClass) {
var evenClass = arguments[1] ? arguments[1] : 'even';
var oddClass = arguments[2] ? arguments[2] : 'odd';
var zebras = new Array();
var tables = document.getElementsByTagName('table');
for (i = 0, j = 0; i < tables.length; i++) {
if (new RegExp("\\b"+cssClass+"\\b").test(tables[i].className)) {
zebras[j] = tables[i]; j++;
}
}
for (i = 0; i < zebras.length; i++) {
var tbodies = zebras[i].getElementsByTagName('tbody');
var parity = false;
for (j = 0; j < tbodies.length; j++) {
var trs = tbodies[j].getElementsByTagName('tr');
for (k = 0; k < trs.length; k++) {
newClass = parity ? evenClass : oddClass;
trs[k].className += trs[k].className ? ' '+newClass : newClass;
parity = !parity;
}
}
}
}
You can just call the method at page load with something like ASZebraStripes("zebra"); any table with the zebra class will get striped. If you pass in 2nd and 3rd arguments, they will be used instead of "even" and "odd" for table row classed
Jason,
Your script so far is the only script that has worked for me. I am assuming that too many scripts were competing for the others to function but this was short, sweet, and used a class instead of an ID.
Thank you,
Sherri
Rather than using JavaScript to do the 'hovering' coloring, use CSS!
table tr:hover {
background-color: #999;
}
I originally had the hover pseudo class in the CSS, and had only relied on the class switching for IE6.
However, I removed the hover to test the class switching technique and forgot to put it back in :)
agree with me that this code is better for this purpose:
$("tr:nth-child(odd)").addClass("odd");
JQuery/MooTools is included almost with every project that i wrote, the use of this code is more readable than the code you post and more shorter.
No, relying on 50k of a framework to do an effect that takes 1k of very clean readable javascript is not better.
You jQuery guys use it as a crutch, instead of learning how to actually work with the DOM.