Table column rollover, is it possible?

[mike.bratanata]

I have a table as such:
<table>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="bgGrey">
<td>Col1Row1</td>
<td>Col2Row1</td>
</tr>
<tr class="bgYellow">
<td>Col1Row2</td>
<td>Col2Row2</td>
</tr>
</table>
I'm trying to get the entire vertical column 'light up' when you roll
over them. So, if you roll over 'Col 1' column, the entire vertical of
that column 'lights up'. To complicate matter, the table has
alternating row color. Can someone throw a suggestion here?

[Sune Rievers]

mi************@gmail.com wrote:

I have a table as such:
<table>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="bgGrey">
<td>Col1Row1</td>
<td>Col2Row1</td>
</tr>
<tr class="bgYellow">
<td>Col1Row2</td>
<td>Col2Row2</td>
</tr>
</table>
I'm trying to get the entire vertical column 'light up' when you roll
over them. So, if you roll over 'Col 1' column, the entire vertical of
that column 'lights up'. To complicate matter, the table has
alternating row color. Can someone throw a suggestion here?

You would have to do this with Javascript, as most browsers afaik does
not support :hover for any other element than A.

Something like this should work:

<tr onmouseover="this.className=bgYellowActive;"
onmouseout="this.className=bgYellow;">

Regards,
Sune Rievers

[Christoph Päper]

Sune Rievers:

mi************@gmail.com wrote:

I'm trying to get the entire vertical column 'light up' when you roll
over them.
You would have to do this with Javascript,

Indeed.
as most browsers afaik does not support :hover for any other element than A.
Most browser /installations/ maybe. Although that seems to be changing,
too. Slowly.

The convenient looking

col:hover>td {background: foo}

does not (or should not) work for plausible reasons, that have been
explained often enough.
<tr onmouseover="this.className=bgYellowActive;"
onmouseout="this.className=bgYellow;">

tr:hover>td {background: foo}

OTOH does work, although, I think, some browsers want "tr>td:hover" in
addition. Don't forget 'th' and maybe restrict to 'tbody'. Table rows
('tr'), however, are horizontal, not vertical as asked, that would be
columns ('col').

Ugly, inconvenient class names btw., but you are right about changing
classes and not using '.style', although your simple example allows only
one class name per element instance and of course wouldn't work with
'col' either. A real JavaScript solution required a more advanced
function, that would also had to take 'rowspan' and 'colspan' into
account. I'm currently not fluent in any path nor scripting language, so
take this pseudo, which roughly describes what has to be done:

for (any in elem.parent.sibling)
or
for (any in elem.parent.parent.children as uncle)
for (any in uncle as cousin)
if (this.hindex == elem.hindex) this.setClass('active')

Ask in <news:comp.lang.javascript> for further assistance.