Highlighting Table Cells with JS - Firefox vs. IE

[lance]

Hi,

I am a JS newbie. Hopefully the answer to my question is not trivial.

I have written a simple webpage that presents a table. A JS function
allows the viewer to click on a cell and each cell with the same
content has the background color changed to lime green. Each cell that
was previously highlighted has the background color changed back to
white. This works great with Firefox but does not work correctly with
IE. In IE, none of the previously highlighted cells has the background
color changed back to white. How can I modify the syntax so that it
will work in both browsers? Below is the JS function. A simple
webpage that will demonstrate the problem is at

http://uia.dyndns.org/test.html

Thanks for any help. Thanks also to Martin Honnen! His posts showed
me how this could be done.

Lance

<script type="text/javascript">
// Script for traversing all of the cells in all of the tables in the
document
function highlight_cell (element) {
var allTables = document.getElementsByTagName('TABLE');
var save_cell_contents=element.innerHTML
for (var i=0; i<allTables.length; i++){
table=allTables[i]
for (var row_index = 0; row_index < table.rows.length;
row_index++) {
for (var c=0; c < table.rows[row_index].cells.length; c++){

if(table.rows[row_index].cells[c].innerHTML==save_cell_contents){
table.rows[row_index].cells[c].bgColor='lime';
}
else
if(table.rows[row_index].cells[c].bgColor=='lime')
table.rows[row_index].cells[c].bgColor='white';
}
}
}
}
</script>

[ASM]

lance wrote:

webpage that will demonstrate the problem is at

http://uia.dyndns.org/test.html
Try to correct all your :
<td bgcolor=" white"
by
<td bgcolor="white"

And perhaps prefer css than html colorization

<style type="text/css">
td { background-color: white; }
</style>
<script type="text/javascript">
// Script for traversing all of the cells in all of the tables in the
document
function highlight_cell (element) {
var allTables = document.getElementsByTagName('TABLE');
var save_cell_contents=element.innerHTML
for (var i=0; i<allTables.length; i++){
table=allTables[i]
for (var row_index = 0; row_index < table.rows.length;
row_index++) {
for (var j=0; j < table.rows[row_index].cells.length; j++){
// and using css ?
var c = table.rows[row_index].cells[j];
c.style.background = c.innerHTML==save_cell_contents? 'lime':
c.style.background=='lime'? 'white':'';
}
}
}
}
</script>

tested with succes on FF and IE5.1 IE5.2 (new) Mac
here :
http://perso.wanadoo.fr/stephane.mmo...ight_cells.htm
--
Stephane Moriaux et son [moins] vieux Mac

[PDannyD]

On Monday 04 July 2005 21:07, lance(ra************@comcast.net) wrote in
message <11**********************@g47g2000cwa.googlegroups .com>

Hi,

I am a JS newbie. Hopefully the answer to my question is not trivial.

I have written a simple webpage that presents a table. A JS function
allows the viewer to click on a cell and each cell with the same
content has the background color changed to lime green. Each cell that
was previously highlighted has the background color changed back to
white. This works great with Firefox but does not work correctly with
IE. In IE, none of the previously highlighted cells has the background
color changed back to white.

I'm doing something similar at work where I'm creating a What's On calendar.
It's in HTML4.01-Strict, if that makes a difference.

Obviously, the 'blahblahblah' is replaced with whatever method you use to
select each element.
eg: document.getElementByID('myID').style.backgroundCo lor="#FF0000"

To highlight I use:
blahblahblah.style.backgroundColor="#FF0000'

and to remove the higlighting I use:
blahblahblah.style.backgroundColor=""

I think "bgColor" should be "style.backgroundColor" but I could be wrong.
I'm no javascript expert, I just hit my head repeatedly against the
keyboard until it works.

[ASM]

PDannyD wrote:

I think "bgColor" should be "style.backgroundColor" but I could be wrong.
I'm no javascript expert, I just hit my head repeatedly against the
keyboard until it works.

bgColor is not an error -> that's work on FF
but preferably used only with document

--
Stephane Moriaux et son [moins] vieux Mac

[Randy Webb]

ASM wrote:

PDannyD wrote:

I think "bgColor" should be "style.backgroundColor" but I could be wrong.
I'm no javascript expert, I just hit my head repeatedly against the
keyboard until it works.

bgColor is not an error -> that's work on FF
but preferably used only with document

FF may not report it as an error, but the property is indeed
backgroundColor.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly

[ASM]

Randy Webb wrote:

ASM wrote:

bgColor is not an error -> that's work on FF
but preferably used only with document

FF may not report it as an error, but the property is indeed
backgroundColor.

FF/Tidy tells me :
Warning: <td> attribute "bgcolor" has invalid value " white"
and not :
Warning: <td> attribute "bgcolor" is invalid attribute
but on same time he advices that it is deprecated :
http://www.w3.org/TR/html4/conform.html#deprecated

As I see any doctype in lance's page
I can considere that page is in HTML 3.2 and by the fact : correct :-)

Anyway I've given a link to this page corrected with css

--
Stephane Moriaux et son [moins] vieux Mac

[ASM]

ASM wrote:

Anyway I've given a link to this page corrected with css

link broken :-(

http://perso.wanadoo.fr/stephane.mor...ight_cells.htm

--
Stephane Moriaux et son [moins] vieux Mac

[lance]

Thanks gentlemen.

The simple fix that makes the script work on IE is changing the syntax
of bgColor to style.backgroundColor, i.e.

table.rows[row_index].cells[c].bgColor='lime'

to

table.rows[row_index].cells[c].style.backgroundColor='lime'
Stephane, I like the effect of changing the cell's color with 'hover'.
However, the effect does not seem to work with IE. I can't get the
color change effect when the mouse hovers over a cell to work in my
script on a cell that has already been clicked on once even though I
have copied what I think is the appropriate syntax from your script.
Here is a link to the new and improved script

http://uia.dyndns.org/test.html

Thanks again,

Lance

[RobG]

lance wrote:

Thanks gentlemen.

The simple fix that makes the script work on IE is changing the syntax
of bgColor to style.backgroundColor, i.e.

table.rows[row_index].cells[c].bgColor='lime'

to

table.rows[row_index].cells[c].style.backgroundColor='lime'
Stephane, I like the effect of changing the cell's color with 'hover'.
However, the effect does not seem to work with IE. I can't get the
color change effect when the mouse hovers over a cell to work in my
script on a cell that has already been clicked on once even though I
have copied what I think is the appropriate syntax from your script.
Here is a link to the new and improved script

http://uia.dyndns.org/test.html

Thanks again,

Try this one:
<script type="text/javascript">
function highlight_cell (element) {
var allTables = document.getElementsByTagName('TABLE');
var save_cell_contents = element.innerHTML;
var c, cells, j, i = allTables.length;

while( i--) {
cells = allTables[i].getElementsByTagName('TD');
j = cells.length;

while ( j-- ) {
c = cells[j];
if ( save_cell_contents == c.innerHTML ) {
c.style.backgroundColor = 'lime';
} else {
c.style.backgroundColor = 'white';
}
}
}
}

function doCell(e) {
e = e || window.event;
var tgt = e.target || e.srcElement;
while ( tgt.parentNode && 'TD' != tgt.nodeName ) {
tgt = tgt.parentNode;
}
if ( 'TD' == tgt.nodeName ) {
highlight_cell(tgt);
}
}

window.onload = document.body.onclick = doCell;
</script>

<table>
<tr><td>A cell</td><td>A cell</td><td>A cell</td></tr>
<tr><td>B cell</td><td>A cell</td><td>B cell</td></tr>
<tr><td>A cell</td><td>C cell</td><td>A cell</td></tr>
<tr><td>A cell</td><td>B cell</td><td>A cell</td></tr>
</table>
<hr>
<table>
<tr><td>A cell</td><td>A cell</td><td>A cell</td></tr>
<tr><td>B cell</td><td>A cell</td><td>B cell</td></tr>
<tr><td>A cell</td><td>A cell</td><td>A cell</td></tr>
<tr><td>A cell</td><td>B cell</td><td>C cell</td></tr>
</table>
--
Rob

[ASM]

lance wrote:

Stephane, I like the effect of changing the cell's color with 'hover'.
However, the effect does not seem to work with IE.
Yes I know
I am already surprised that onclick works in td with IE ! So ...

In IE 'hover' works only with links

You can try to ask Bill he fixes that pb :-)

I can't get the
color change effect when the mouse hovers over a cell to work in my
script on a cell that has already been clicked on once
Yes that's right
didn't go further ...

You can delete this rule from the css if it's not convenient.
Here is a link to the new and improved script

http://uia.dyndns.org/test.html

Thanks again,

For IE (an others ?) there is an hover altenative here :
http://perso.wanadoo.fr/stephane.mor...ght_cells2.htm
but very uggly because onmouseover and onmousout on each td :-(

Don't understand ... don't work with iCab :-(
--
Stephane Moriaux et son [moins] vieux Mac

[ASM]

RobG wrote:

Try this one:

on Mac, IE 5.2 and FF both tell me :
document.body is not an object :-(

--
Stephane Moriaux et son [moins] vieux Mac

[RobG]

ASM wrote:

RobG wrote:

Try this one:

on Mac, IE 5.2 and FF both tell me :
document.body is not an object :-(

Works for me with Firefox 1.0.4 and Safari 1.0.3 (OS X 10.2.8) and
even IE 5.2.

Probably a better alternative is to attach the event in the body tag:

<body onclick="doCell(event);">

or add it from the script using the modified:

document.body.onclick = doCell;

Note missing '(event)' as that is passed anyway when attaching
events this way in Firefox, Safari, et al.

--
Rob

[ASM]

RobG wrote:

ASM wrote:

on Mac, IE 5.2 and FF both tell me :
document.body is not an object :-(

Works for me with Firefox 1.0.4 and Safari 1.0.3 (OS X 10.2.8) and
even IE 5.2.

could you put in line your page ?
probably I made a mistake doing mine ?

I have really to understand your doCell()
Probably a better alternative is to attach the event in the body tag:

<body onclick="doCell(event);">

or add it from the script using the modified:

document.body.onclick = doCell;

Note missing '(event)' as that is passed anyway when attaching
events this way in Firefox, Safari, et al.

tryed all that (even in table) without succes :-(

I'm there :
special IE (and others ?) :
http://perso.wanadoo.fr/stephane.mor...t_cells_IE.htm
special normal (gecko ?) :
http://perso.wanadoo.fr/stephane.mor..._cells_CSS.htm

--
Stephane Moriaux et son [moins] vieux Mac

[lance]

I have learned a bit more --

Using the bgColor attribute works fine in both IE and FF. The
difference between the two browsers is that when this attribute is
queried, the color reported is in different formats, e.g. 'orange' in
FF, and 'ffa500' in IE. Setting the bgColor attribute and then
querying the style.backgroundColor attribute does not work. This may
be obvious to the enlightened.

It appears the using style.backgroundColor works almost equivalently as
long as you are consistent. The difference is that colors are reported
in the text format, e.g. 'orange', in both FF and IE.

Here are two scripts that create a small table with some default
background colors. If you click on a cell, all cells with the same
cell content turn green, all other cells get turned to white if they
are green or orange. The first script used the bgColor attribute
consistently and the second script uses the style.backgroundColor
attribute consistently. Turn the alerts on or off to understand the
differences. Hopefully, this is not obvious to everyone.

http://uia.dyndns.org/test2.html
http://uia.dyndns.org/test3.html

Thanks for the replies!

[ASM]

lance wrote:

I have learned a bit more --

Using the bgColor attribute works fine in both IE and FF. The
difference between the two browsers is that when this attribute is
queried, the color reported is in different formats, e.g. 'orange' in
FF, and 'ffa500' in IE.
Yes and it's one of the problems.
Setting the bgColor attribute and then
querying the style.backgroundColor attribute does not work.
Normal : you don't speak about same things
It appears the using style.backgroundColor works almost equivalently as
long as you are consistent. The difference is that colors are reported
in the text format, e.g. 'orange', in both FF and IE.
interesting,
somebody from iCab told me that would not work in every browsers
if you use names instead colors codes
http://uia.dyndns.org/test2.html
http://uia.dyndns.org/test3.html

both works in my IE5.2, FF and Safari
only this with bgcolor works fine in iCab

but ...
I didn't see hovers on selected cells ;-)
--
Stephane Moriaux et son [moins] vieux Mac