Table Object

**deiterfall** · 11-26-2002 01:23 PM

I'm a newbie, so I'll bet this is an easy one, but it has me stumped.

I want the background image in a table cell to change when the user presses the space bar within the cell. Here's the code. The alert box appears, but I keep getting the error message:

document.mytable is not an object.

I'm using IE5. Thanks for any help you can provide, I've tried everything I can think of. For example I tried just changing the background of the document rather than referencing the individual cell, but I got the same error.

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>Test</TITLE>
<SCRIPT LANGUAGE=javascript>

</SCRIPT>
</HEAD>
<BODY>
<FORM>
<TABLE NAME="mytable" WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
<TR>
<TD background="Images/t1_a.gif" onkeypress="KeyDown(0,0)">Hello</TD>
<TD>there.</TD>
<TD>What</TD>
</TR>
<TR>
<TD>is</TD>
<TD>the</TD>
<TD>problem</TD>
</TR>
<TR>
<TD>with</TD>
<TD>this</TD>
<TD>code?</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

**Rick Bull** · 11-26-2002 04:21 PM

The way I would do it is to use style to set the image, and use an ID to reference it:

Code:

<!-- HTML: -->
<td id="cell1" style="background:url('image1.png');">

//JavaScript:
if (document.getElementById)
  document.getElementById('cell1').style.background   = "url('image2.png');";

**deiterfall** · 11-26-2002 06:25 PM

Hey thanks Rick. I tried your solution, but now I get an "Invalid Argument" error meesage on the line in the JavaScript that changes the background. My updated code is below. (Note: I confirmed that it wasn't a missing or bad image causing the problem by swapping the background that's assigned within the TR tag with the one that's assigned in the JavaScript. Now I see a different background image in the cell, but I still can't swap it).

Cheers

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>Test</TITLE>
<SCRIPT LANGUAGE=javascript>

</SCRIPT>
</HEAD>
<BODY>
<FORM>
<TABLE NAME='mytable' WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
<TR NAME='myrow'>
<TD id="cell1" style="background:url('Images/t2_a.gif');" onkeypress="KeyDown(0,0)">Hello</TD>
<TD>there.</TD>
<TD>What</TD>
</TR>
<TR>
<TD>is</TD>
<TD>the</TD>
<TD>problem</TD>
</TR>
<TR>
<TD>with</TD>
<TD>this</TD>
<TD>code?</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

**Rick Bull** · 11-27-2002 04:50 AM

Sorry that was my fault, you don't need the semi-colon (; ) at the end, should be this:

Code:

document.getElementById('cell1').style.background = "url('Images/t1_a.gif')";

I forgot we are referring to an individual style property, not all of them (where you have to seperate them by semi-colons)

**deiterfall** · 11-27-2002 08:32 AM

Brilliant! Thanks Dave. My approach was to assign the table a name and then use the "document" object to reference it and then address the cells through the 'rows' and 'cells' collections. The documentation I've read indicates that this is a valid approach:

document.<name of element>

In my case <name of element> was 'mytable' (the name I assigned to the table withion the TABLE tag). The documentation goes on to say that individual cells of a table can be referenced through the 'rows' and 'cells' collections. This line of code was copied right out of the MSDN 6.0 documentation:

...
document.all.mytable.rows(i).cells(j).innerText = count;
...

Any idea why my attempts at referncing the table object through the document object fail?

Your solution works anyway, so I'm grateful either way!

Thread: Table Object

Thread Tools

Display

Table Object

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions