1 why not :hover?

It might be nice at least to mention the following CSS:

table.ruled tr:hover { background-color: #aaaaff;
}

It won’t work in IE (which doesn’t support :hover except on anchors), but it’s the best solution for browsers that support it.

posted at 12:25 pm on March 27, 2004 by Felipe Gasper

2 Points about the javascript

if (document.getElementById && document.createTextNode)

Why are you testing for these functions when you use neither? Wouldn’t it be better to check for document.getElementsByTagName?

if(tables[i].className==‘ruler’)

Probably should check to see if classname includes ruler – that way allowing for multiple classes.

trs[j][removed].nodeName==‘TBODY‘» && trs[j][removed].nodeName!=‘TFOOT’

If nodeName == ‘TBODY’ then it’s definitely not going to equal TFOOT !

posted at 12:41 pm on March 27, 2004 by Hadley

3 also....

For things that involve dynamically altering elements’ classes (as IE necessitates), it’s often best to assume that there is an existing (non-empty) class for the element. For example:

function mouseoverHandler(e) { var class = e.currentTarget.className.split(/\s+/); class.push(‘IEhover’); e.currentTarget.className = class.join(’ ‘);
}

function mouseoutHandler(e) { e.currentTarget.className = e.currentTarget.className.replace(/\s*IEhover/,’‘);
}

someElem.addEventHandler(‘mouseover’,mouseoverHandler,false);
someElem.addEventHandler(‘mouseout’,mouseoutHandler,false);

posted at 12:45 pm on March 27, 2004 by Felipe Gasper

4 and for clicks....

Since most people using this might want also to be able to “click” their rows….

function clickHandler(e) { var class = e.currentTarget.className; if (class.match(/\s*clicked/)) { class = class.replace(/\s*clicked/,’‘); } else { var classSplit = class.split(/\s+/); classSplit.push(‘clicked’); class = classSplit.join(’ ‘); }

someElem.addEventHandler(‘click’,clickHandler,false);

posted at 12:59 pm on March 27, 2004 by Felipe Gasper

5 Cheers for that Phillipe

As for :hover, you answered yourself, IE without the IE7 extension doesn’t support it, this technique is a hack for the present situation. As for the checking, it is a standard way to check for DOM, excluding Opera 6 and other browsers that claim to understand DOM but implement it flakily. As for making the rows clíckable, I dislike that as you might want different targets for each TD not one for the whole row.
Why different classes when you can do that with different IDs as shown in the example?

posted at 01:15 pm on March 27, 2004 by Chris

6 Felipe not Phillipe

Sorry, reading CSS-D emails at the same time confused me.

posted at 01:23 pm on March 27, 2004 by Chris

7 Any way to use AccessKeys for naviation?

Anyone think it’s possible to use accesskeys to set focus and navigation up & down in the table, a la Excel? I know that’s out there, but was wondering about how I use a spreadsheet.

posted at 02:17 pm on March 27, 2004 by Wazungu

8 answering Chris....

My “clicking” doesn’t have to do with loading a new page, popup, or anything, but simply allowing rows to present the appearance of being “selected” with a mouse click. I usually implement this in tandem with the hover with such CSS as:

table.interactive tr:hover td { border: 1px solid blue;
}

table.interactive tr.clicked td { background-color: #ddddff;
}

Not sure what you’re asking with regard to classes vs. IDs, but since this is all about attributes of similar objects, doing this with class seems to be natural. (I really wish the HTML people had used a different term than “class”; it makes people neglect the multi-class power…)

posted at 02:20 pm on March 27, 2004 by Felipe Gasper

9 Accesskeys and focused elements

How you use a spreadsheet? Use Openoffice or Excell. I am sure you can simulate that, but why reinvent an app in DOM?

As for focusing, you can of course do that, but what happens to the links in the TDs then?

posted at 02:29 pm on March 27, 2004 by Chris

10 another answer...

I use spreadsheet-like things in DOM for building database web apps. It’s a very intuitive way for people to work: highlight some rows with mouse clicks, then click another button to perform some function on the data they represent. In this context I have a hidden input for each row whose ‘disabled’ attribute gets toggled by the mouse click.

Any links in the TDs are still active. Usually what happens by default is that the click will go first to the row, then to the link, so what you see is the row turning color right before your browser switches pages. I work around the row-click here by doing

noSelectRow = false;
function linkMouseoverHandler(e) { noSelectRow = true;
}
function linkMouseoutHandler(e) { noSelectRow = false;
}

…and adding a noSelectRow check to the row-clicking function.

posted at 02:36 pm on March 27, 2004 by Felipe Gasper

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)