You know what they say about Leopards… well at least you can get a table to change its stripes with a bit of DOM scripting.
It’s a fairly trivial problem, but seeing as I’m pretty green when it comes to unobtrusive JavaScript, it’s somewhere to start!
The Playpen #3 page shows off the table, which has a new class added on alternate rows, and defines a new background colour in the CSS. OnMouseOver will change the class again, to give another colour. But I’m having real trouble resetting the original class/colour onMouseOut… It’s probably because the DOM is changed on the fly, and the original (not moused over) state of the alternate row is never actually “stored” on the page. If anyone has any suggestions, I’d be very interested to hear.
For the record, my stripeTables script looks like this:
function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName(“table”);
for (var i=0; i<tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName(“tr”);
for (var j=0; j<rows.length; j++) {
if (odd == true) {
addClass(rows[j],”altrow”);
odd = false;
} else {
odd = true;
}
}
}
}
addLoadEvent(stripeTables);
And this is highlightRows:
function highlightRows() {
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName(“tr”);
for (var i=0; i<rows.length; i++) {
var rowclass = rows[i].getAttribute(“class”);
rows[i].onmouseover = function() {
addClass(this,”highlight”);
}
rows[i].onmouseout = function() {
this.setAttribute(“class” , “rowclass[i]“);
}
}
}
addLoadEvent(highlightRows);
I thought getting the Class attribute and storing as rowclass would allow me to reset it to what it was before the onMouseOver event, but sadly the table rows become unstripey once they are moused over!
The only other way I can think of doing it is writing some sort of subtractClass script to complement addClass, but seeing as this will almost certainly involve hideous regular expressions, I’m rather shying away from that.
Anyone have any ideas what I’m doing wrong?
