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
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]

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; }

<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
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.mmoriaux/truc/tables_highlight_cells.htm

 

[PDannyD]

On Monday 04 July 2005 21:07, lance([email protected]) wrote in

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.backgroundColor="#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]

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

 

[Randy Webb]

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.

 

[ASM]

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

 

[ASM]

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

link broken :-(

http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_cells.htm

 

[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]

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.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>

 

[ASM]

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.moriaux/truc/tables_highlight_cells2.htm
but very uggly because onmouseover and onmousout on each td :-(

Don't understand ... don't work with iCab :-(

 

[ASM]

Try this one:

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

 

[RobG]

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.

 

[ASM]

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.moriaux/truc/tables_highlight_cells_IE.htm
special normal (gecko ?) :
http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_cells_CSS.htm

 

[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]

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 ;-)