www.webdeveloper.com
Results 1 to 5 of 5

Thread: Table Object

  1. #1
    Join Date
    Nov 2002
    Posts
    3

    Table Object

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

  2. #2
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    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');";

  3. #3
    Join Date
    Nov 2002
    Posts
    3
    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>
    deiterfall

  4. #4
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    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)

  5. #5
    Join Date
    Nov 2002
    Posts
    3
    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!
    deiterfall

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles