So you’re laying out some tabular data. (You wouldn’t be using tables for any other reason, now, would you? Didn’t think so.) You stopped by ALA and made some zebra tables to make your rows nice and clear.
Then you thought to yourself, “I think I’ll use the :hover pseudo-class to add a nice hover effect to those rows.” But soon it was “Arrgh, why isn’t it working in IE?”
OK, stop yawning, so this is old news. We already knew that IE only supports the :hover pseudo-class on anchors. You’ve already been using Suckerfish for your drop-down navigation, right? Great. Let’s put it to work on a table.
Note: If you’re not already familiar with Suckerfish, take a moment to read the link above, as I’m only going to cover what I tweaked in it, not the whole thing.
So what needs to change to make Suckerfish work with tables? Well, it starts out the same way: after identifying the browser as IE, you use getElementById to get your element, and store that in a variable:
searchRoot = document.getElementById("your-table-id");
Now, the original Suckerfish looks through the child elements of searchRoot for any <li> elements. But instead of list items, we are looking for table rows.
If you simply change node.nodeName=="LI" to node.nodeName=="TR", your script won’t work. The only direct child elements of a <table> are <thead> and <tbody>.
Here’s the trick: <tbody> will always be a child element, whether it’s in your markup or not. So JavaScript will not find a table row in the child elements of a table.
So first we have to get the table body:
for (i=0; i<searchRoot.childNodes.length; i++) {
node = searchRoot.childNodes[i];
if (node.nodeName=="TBODY") {
Then we can search through that for the table rows:
for (a=0; a<node.childNodes.length; a++) {
newNode = node.childNodes[a];
if (newNode.nodeName=="TR") {
Besides that, the rest of the original script stays the same! So that leaves us with our final script:
window.onload = function tableSuck() {
if (document.all&&document.getElementById) {
searchRoot = document.getElementById("your-table-id");
for (i=0; i<searchRoot.childNodes.length; i++) {
node = searchRoot.childNodes[i];
if (node.nodeName=="TBODY") {
for (a=0; a<node.childNodes.length; a++) {
newNode = node.childNodes[a];
if (newNode.nodeName=="TR") {
newNode.onmouseover=function() {
this.className+=" over";
}
newNode.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
}
}
To finish it all off, write the same CSS rule to cover both tr:hover and tr.over, just like with the original Suckerfish.
And it works! Check out the final results here.
