PDA

Click to See Complete Forum and Search --> : 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>
<!--
function KeyDown(ARow, ACol)
{
if (window.event.keyCode == 32)//Space
{
alert("Space");
document.mytable.rows(ARow).cells(ACol).background="Images/t2_a.gif";
}
else
{
alert("NOT Space");
}
}
//-->
</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:


<!-- 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>
<!--
function KeyDown(ARow, ACol)
{
if (window.event.keyCode == 32)//Space
{
alert("Space");
if (document.getElementById)
document.getElementById('cell1').style.background = "url('Images/t1_a.gif');";
}
else
{
alert("NOT Space");
}
}
//-->
</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:


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) :rolleyes:
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!