Highlight column

[John Smith]

I want to highlight a column (in a table) when the mouse moves over it.
If it was a row I would use something like:
<TR OnMouseOver="this.style.backgroundColor='red';"
OnMouseOut="this.style.backgroundColor='';">
But I don't have any Idea how to do this with a column.

Any Ideas???

 

[Paul Furman]

I want to highlight a column (in a table) when the mouse moves over it.
If it was a row I would use something like:
<TR OnMouseOver="this.style.backgroundColor='red';"
OnMouseOut="this.style.backgroundColor='';">
But I don't have any Idea how to do this with a column.

Any Ideas???

I guess you need to structure the table as nested with a table for each
column, though people are going to jump all over you here for not using
css <g>. <ducking & running>

 

[Richard]

I want to highlight a column (in a table) when the mouse moves over it.
If it was a row I would use something like:
<TR OnMouseOver="this.style.backgroundColor='red';"
OnMouseOut="this.style.backgroundColor='';">
But I don't have any Idea how to do this with a column.

Any Ideas???

Is this what you're looking to do?

http://www.insidedhtml.com/tips/styles/ts25/page3.asp

<colgroup> would be appropriate but it's only supported by IE.

 

[John Smith]

Something like that but with less use of javascript.

 

[John Smith]

I guess you need to structure the table as nested with a table for each
column, though people are going to jump all over you here for not using
css <g>. <ducking & running>

Well I'm willing to use CSS but don't know how that can help this issue, so
if you have any ideas!!!

 

[Richard]

John Smith wrote:

Well I'm willing to use CSS but don't know how that can help this issue,
so if you have any ideas!!!

With css divisions it would be easier to do your mouseover highlighting with
no javascript involved.
You could set up each column in a container division, then have rows within
the column.
The mouseover happens when the mouse moves into the container division.
And you could highlight the individual cell with a different color than the
column even.

Try out this little highlighting trick.

<style type="text/css">

..container1 { width:100px; border:solid black;}
..container2 {width:100px; }
..container3 { width:100px; }


..box1 {height:50px;}


</style>

<div class="container1" onmouseover="this.style.backgroundColor='red'">
<div class="box1">box 1 </div>
<div class="box1" onmouseover="this.style.backgroundColor='blue'">box 2
</div>
<div class="box1">box 3 </div>
</div>


When the mouse is moved into the container, it all changes to red.
When moved into box 2, the box changes to blue, 1 and 3 remain red.

 

[John Smith]

John Smith wrote:



With css divisions it would be easier to do your mouseover highlighting with
no javascript involved.
You could set up each column in a container division, then have rows within
the column.
The mouseover happens when the mouse moves into the container division.
And you could highlight the individual cell with a different color than the
column even.

Try out this little highlighting trick.

<style type="text/css">

.container1 { width:100px; border:solid black;}
.container2 {width:100px; }
.container3 { width:100px; }


.box1 {height:50px;}


</style>

<div class="container1" onmouseover="this.style.backgroundColor='red'">
<div class="box1">box 1 </div>
<div class="box1" onmouseover="this.style.backgroundColor='blue'">box 2
</div>
<div class="box1">box 3 </div>
</div>


When the mouse is moved into the container, it all changes to red.
When moved into box 2, the box changes to blue, 1 and 3 remain red.

This helps if you only want to highlight columns.
Now the problem is that I have a table (perhaps created by divisions),
this table is a cross reference so I want to highlight a column AND a row
and hightlight the "selected" cell differently.

 

[Richard]

This helps if you only want to highlight columns.
Now the problem is that I have a table (perhaps created by divisions),
this table is a cross reference so I want to highlight a column AND a row
and hightlight the "selected" cell differently.

Ok. Now that's what you should have said at the beginning.
That's a little bit more involved, but it could be done.
You would need a container division for each row as well as the columns.
Such as .rowcontainer and .colcontainer.
When the mouseover activates for a chosen cell, the colors will be generated
by the statement itself.
Interesting idea, I'll play with that later.

 

[Eric Bohlman]

Ok. Now that's what you should have said at the beginning.
That's a little bit more involved, but it could be done.
You would need a container division for each row as well as the
columns. Such as .rowcontainer and .colcontainer.
When the mouseover activates for a chosen cell, the colors will be
generated by the statement itself.
Interesting idea, I'll play with that later.

At this point, I think it really makes more sense to mark up the table as a
plain table, attach mouseover and mouseout events to each cell, and use
scripting to do the highlighting (by setting style properties on groups of
cells using the DOM). The problem with the row and column container
proposals is that they require destroying the logical markup of the table
(e.g. converting an NxM table into M Nx1 tables) in order to achieve a nice
but optional effect. It's less harmful to use optional features (like
scripting) to achieve optional effects than to torture the data.

For example, if the table is properly marked up, someone might be able to
import it into an analytical application of some sort, and if an advanced
browser with special support for true tables were to appear, it could allow
resizing/rearranging columns, sorting rows, etc. But if the table's
structure has been destroyed for purely presentational reasons, that can't
happen.

 

[e n | c k m a]

I haven't tested the above code but it might work.

Just tried it and got it working with the below code if you're still
interested. Unfortunately, you're not gonna be able to get this working
without some form of client-side scripting.


<script type="text/javascript">
function highlight(col,color)
{
for(i=0; i<3; i++)
document.getElementById(col+i).style.backgroundColor=color;
}
</script>


<table>
<tr>
<th><a href="#" onmouseover="highlight('colOne','yellow')"
onmouseout="highlight('colOne','#FFF')">Column 1</a></th>
<th><a href="#" onmouseover="highlight('colTwo','blue')"
onmouseout="highlight('colTwo','#FFF')">Column 2</a></th>
<th><a href="#" onmouseover="highlight('colThree','green')"
onmouseout="highlight('colThree','#FFF')">Column 3</a></th>
</tr>
<tr>
<td id="colOne0">Row 1</td>
<td id="colTwo0">Row 1</td>
<td id="colThree0">Row 1</td>
</tr>
<tr>
<td id="colOne1">Row 2</td>
<td id="colTwo1">Row 2</td>
<td id="colThree1">Row 2</td>
</tr>
<tr>
<td id="colOne2">Row 3</td>
<td id="colTwo2">Row 3</td>
<td id="colThree2">Row 3</td>
</tr>
</table>

Might be a bit messy but worth a go I guess. More than one way to skin a
cat.

Nick.

 

[John Smith]

Just tried it and got it working with the below code if you're still
interested. Unfortunately, you're not gonna be able to get this working
without some form of client-side scripting.


<script type="text/javascript">
function highlight(col,color)
{
for(i=0; i<3; i++)
document.getElementById(col+i).style.backgroundColor=color;
}
</script>


<table>
<tr>
<th><a href="#" onmouseover="highlight('colOne','yellow')"
onmouseout="highlight('colOne','#FFF')">Column 1</a></th>
<th><a href="#" onmouseover="highlight('colTwo','blue')"
onmouseout="highlight('colTwo','#FFF')">Column 2</a></th>
<th><a href="#" onmouseover="highlight('colThree','green')"
onmouseout="highlight('colThree','#FFF')">Column 3</a></th>
</tr>
<tr>
<td id="colOne0">Row 1</td>
<td id="colTwo0">Row 1</td>
<td id="colThree0">Row 1</td>
</tr>
<tr>
<td id="colOne1">Row 2</td>
<td id="colTwo1">Row 2</td>
<td id="colThree1">Row 2</td>
</tr>
<tr>
<td id="colOne2">Row 3</td>
<td id="colTwo2">Row 3</td>
<td id="colThree2">Row 3</td>
</tr>
</table>

Might be a bit messy but worth a go I guess. More than one way to skin a
cat.

Nick.

I've used some javascript and it works, but only with IE
I'm currently working on getting it right with other browsers also.
btw I've found another difficulty (which I already solved), the table is
dynamicly created and I don't know in advance how many cols and rows the
table will have so I can't use the "for loop" as mentioned above.

 

[John Smith]

At this point, I think it really makes more sense to mark up the table as a
plain table, attach mouseover and mouseout events to each cell, and use
scripting to do the highlighting (by setting style properties on groups of
cells using the DOM). The problem with the row and column container
proposals is that they require destroying the logical markup of the table
(e.g. converting an NxM table into M Nx1 tables) in order to achieve a nice
but optional effect. It's less harmful to use optional features (like
scripting) to achieve optional effects than to torture the data.

For example, if the table is properly marked up, someone might be able to
import it into an analytical application of some sort, and if an advanced
browser with special support for true tables were to appear, it could allow
resizing/rearranging columns, sorting rows, etc. But if the table's
structure has been destroyed for purely presentational reasons, that can't
happen.

This shouldn't be a problem for me since the data for the table is pulled
out of an database and could also be accessed through an XML document.

 

[Toby A Inkster]

I want to highlight a column (in a table) when the mouse moves over it.

I have a very nice pure-CSS solution, but it doesn't actually work in any
browsers.

http://www.goddamn.co.uk/tobyink/scratch/tablehl

It'll be great when the browser makers catch up with my l33t 5k!lZ.

 

[Toby A Inkster]

I've used some javascript and it works, but only with IE
I'm currently working on getting it right with other browsers also.
btw I've found another difficulty (which I already solved), the table is
dynamicly created and I don't know in advance how many cols and rows the
table will have so I can't use the "for loop" as mentioned above.

Why not dynamically generate the "for loop" too?