I want to use this great thing in a “tabbed content” with 3 different tabs and put one table in each tab.
The problem hereby is that it only highlights the first table in the first tab and the other ones aren´t highlighted, unfortunately.
I noticed that the table “highlight-table” is an id, what tells me that it can only be used for one time on the same page.
So my question: how can I use the effect, by defining the entire table “highlight-table” as a class, rather than an id???

Thanks a lot! :) Hit me up, if you need to see an example of what I mean.

Cheers,
Justin

First, want to tell you I love this code. I’m using it to make a military pay chart:

http://militarytips.net/military-pay-chart-2010/

Can you tell me how to do this with multiple tables on the same page? I tried it, but only the first table works. My plan is to copy three versions of the code and rename “highlight-table” in each one. But I know there’s got to be an easier way! What I want to do is divide out the table into Officer, Warrant Officer, and Enlisted.

Thanks,
Casey

One of my os’s (XP SP3′s) only highlights the file name, while annoyingly my other os (Vistas’s) highlights the entire row of columnized details for the chosen file name.

That latter, highlighting all details, is a bit of an annoyance because it forces users to expand windows enough to extend beyond the last column so the user can click outside the columns in order to click-hold and drag a capture box for a group of files. Likely it doesn’t require learning DOS to change this behavior, so where does the common user configure what gets highlighted (just the file name as opposed to it and all it’s details)?

Please don’t ask me if I want wine with that cheese.

window.addEvent(‘domready’, function() {
var columns = [], rows = [], cells = [], length = 0,
table = document.id(‘highlight-table’);

rows = table.getElements(‘tbody tr’);
cells = $$(rows.getElements(‘td’));
length = rows[0].getElements(‘td’).length;

for (i = 0; i < length; i++) {
columns[i] = table.getElements('td:nth-child(' + (i + 1) + ')').set('data-column', i);
};

for (j = 0; j < rows.length; j++) {
rows[j].getElements('td').set('data-row', j);
}

cells.addEvents({
'mouseenter': function() {
columns[this.get('data-column')].addClass('column-hover');
rows[this.get('data-row')].addClass('row-hover');

this.addClass('cell-hover');
},
'mouseleave': function() {
columns[this.get('data-column')].removeClass('column-hover');
rows[this.get('data-row')].removeClass('row-hover');

this.removeClass('cell-hover');
}
});
});

var rows = document.id(‘highlight-table’).getElements(‘tbody tr’);

I don’t think that that makes it any more efficient, just saves defining the variable “table” (which you don’t use)

Anyway, I realise that this is just a demo ;)