473,748 Members | 2,426 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Highlighting Table Cells with JS - Firefox vs. IE

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.getEle mentsByTagName( 'TABLE');
var save_cell_conte nts=element.inn erHTML
for (var i=0; i<allTables.len gth; i++){
table=allTables[i]
for (var row_index = 0; row_index < table.rows.leng th;
row_index++) {
for (var c=0; c < table.rows[row_index].cells.length; c++){

if(table.rows[row_index].cells[c].innerHTML==sav e_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>

Jul 23 '05 #1
14 3412
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.getEle mentsByTagName( 'TABLE');
var save_cell_conte nts=element.inn erHTML
for (var i=0; i<allTables.len gth; i++){
table=allTables[i]
for (var row_index = 0; row_index < table.rows.leng th;
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.backgro und = c.innerHTML==sa ve_cell_content s? 'lime':
c.style.backgro und=='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
Jul 23 '05 #2
On Monday 04 July 2005 21:07, lance(ra******* *****@comcast.n et) wrote in
message <11************ **********@g47g 2000cwa.googleg roups.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.getEle mentByID('myID' ).style.backgro undColor="#FF00 00"

To highlight I use:
blahblahblah.st yle.backgroundC olor="#FF0000'

and to remove the higlighting I use:
blahblahblah.st yle.backgroundC olor=""

I think "bgColor" should be "style.backgrou ndColor" but I could be wrong.
I'm no javascript expert, I just hit my head repeatedly against the
keyboard until it works.
Jul 23 '05 #3
ASM
PDannyD wrote:

I think "bgColor" should be "style.backgrou ndColor" 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
Jul 23 '05 #4
ASM wrote:
PDannyD wrote:

I think "bgColor" should be "style.backgrou ndColor" 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.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #5
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
Jul 23 '05 #6
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
Jul 23 '05 #7
Thanks gentlemen.

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

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

to

table.rows[row_index].cells[c].style.backgrou ndColor='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

Jul 23 '05 #8
lance wrote:
Thanks gentlemen.

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

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

to

table.rows[row_index].cells[c].style.backgrou ndColor='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.getEle mentsByTagName( 'TABLE');
var save_cell_conte nts = element.innerHT ML;
var c, cells, j, i = allTables.lengt h;

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

while ( j-- ) {
c = cells[j];
if ( save_cell_conte nts == c.innerHTML ) {
c.style.backgro undColor = 'lime';
} else {
c.style.backgro undColor = '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.o nclick = 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
Jul 23 '05 #9
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
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
4414
by: Jukka K. Korpela | last post by:
I just noticed that most browsers render <table border="1"><tr><td><p>foo</p></td></tr></table> the same way as <table border="1"><tr><td>foo</td></tr></table> That is, they ignore the p markup in the sense that they don't apply the normal default top and bottom margins. This is rather odd, especially
0
2410
by: Phil Evans | last post by:
URL: http://philevans.com/tabletest.html A boring table, but one which illustrates my problem. I'm writing a large PHP app which outputs data tables. Users of the app can configure their preferences for table border width, colour, style etc . . . I don't have access to the main stylesheet from the PHP, so the border for the table is going inline, thus: <table id="testTable" style="border: 1px dotted red;">
4
26209
by: N. Demos | last post by:
The following code renders as intended in IE (A TABLE, with cells of fixed width and height, inside of a DIV with fixed width and height and overflow set to hidden.) In Firefox, the table cells assume a narrower with than specified. If I comment out the width for the DIV, then the cells render with the correct width and height. Why is this happening? Thanks. Regards, N. Demos
0
1684
by: N. Demos | last post by:
I have a single row table with fixed dimensioned cells nested inside a fixed dimensioned div, which has overflow: hidden. The div's dimensions are such that It should only display the first two table cells. This all renders correctly in MSIE 6.x, but doesn't in Firefox. In Firefox, the cell widths are reduced so that all the cells are displayed within the div frame. I've played around with this: commenting out css properties to see if...
3
5910
by: N. Demos | last post by:
I have a single row table with fixed dimensioned cells nested inside a fixed dimensioned div, which has overflow: hidden. The div's dimensions are such that It should only display the first two table cells. This all renders correctly in MSIE 6.x, but doesn't in Firefox. In Firefox, the cell widths are reduced so that all the cells are displayed within the div frame. I've played around with this: commenting out css properties to see if...
2
1242
by: Richard Brooks | last post by:
Basically, what I want to do is to have a viewport where an image is dropped in (hidden) on the right hand side and for the right hand side to be scrolled into view, when a key to go right is pressed. I guess that two table cells with no gap between them (to look like a single wide graphic) will allow me to drop a new image in and then scroll. So, scrolling right would mean to drop the new view in on the right (hidden) then to scroll...
1
2917
by: RobG | last post by:
I'm trying to get table cells to clip content rather than wrapping. It has been suggested to use: td.clipped { width: 5em; overflow: hidden; white-space: nowrap; }
2
3031
by: markszlazak | last post by:
I'm a relatively slow response of table cells changing their background color with mouseover/our in IE6 (Win 2K) but the response is fine (fast) in Firefox. Why? The code is below. Sorry about the length. <html> <head> <title>Rapid Blocking Interface</title> <style> .calendar {
5
3637
by: Test | last post by:
Is it possibel to have DIV's inside a table cell so that their position can be given relative to top left corner of the cell. Now the DIVs seem to position themselves relative to previous object.
0
8984
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9530
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9363
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9238
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
6073
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4593
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4864
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3300
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2206
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.