How to change cell background?

Discussion in 'Javascript' started by Keith Smith, Apr 24, 2005.

  1. Keith Smith

    Keith Smith Guest

    How can I change the background IMAGE (not just color) of a CELL in a table?

    I know that I can do this using CSS, but I really need to be able to do it
    using JavaScript. Anyone know how?

    Must be able to change the image for each cell - not the whole table.

    Please help.
     
    Keith Smith, Apr 24, 2005
    #1
    1. Advertisements

  2. Keith Smith

    Mick White Guest

    document.getElementById('foo').style.backgroundImage = "url(bar.gif)" ;

    Mick
     
    Mick White, Apr 24, 2005
    #2
    1. Advertisements

  3. Keith Smith

    RobB Guest

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">


    #foo td {
    width: 200px;
    height: 200px;
    }
    ..test {
    background: url(http://frostandkeading.com/K07_200-x-200.jpg)
    no-repeat;
    }

    </style>
    <script type="text/javascript">

    function setCellBG(tdref, imgsrc)
    {
    if (null != tdref && tdref.style)
    tdref.style.backgroundImage = 'url(' + imgsrc + ')';
    }

    window.onload = function()
    {
    setTimeout(
    function()
    {
    var src = 'http://frostandkeading.com/K22_200-x-200.jpg';
    var td = document.getElementById('foo').rows[1].cells[1];
    setCellBG(td, src);
    }, 3000);
    }

    </script>
    </head>
    <body>
    <table>
    <tbody id="foo">
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr><tr>
    <td></td>
    <td class="test"></td>
    <td></td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
     
    RobB, Apr 24, 2005
    #3
  4. Keith Smith

    azcn2503 Guest

    Here is a handy function that lets multiple browsers perform this:

    Put this in the <HEAD>:

    <script type="text/javascript"><!--
    function grab(o){return
    document.all?document.all[o]:document.getElementById?document.getElementById(o):"";}
    //--></script>

    Then when you want to grab an object by its ID attribute:

    <script type="text/javascript"><!--
    grab("tablecell").style.backgroundImage="url(images/image1.jpg)";
    //--></script>
     
    azcn2503, Apr 24, 2005
    #4
  5. Keith Smith

    Keith Smith Guest

    It doesn't seem to work for me. Would someone mind giving it a try and let
    me know if it works for you?
     
    Keith Smith, Apr 24, 2005
    #5
  6. Keith Smith

    RobG Guest

    A more efficient test is to put document.getElementById first, as it
    is supported by a wider range of browsers than document.all.
    Therefore most browsers will not go to the second test. Rearranging
    gives:

    return document.getElementById? document.getElementById(o) :
    document.all? document.all[o] : "";

    When using the style object, you should test to see if it's supported
    first, otherwise the user may be presented with an error message that
    they have no idea how to remedy.
    Here is a full page below, there are many different ways to write
    this, below is just an example. Over to you.



    <html><head><title>play</title></head>
    <body>

    <script type="text/javascript">

    // Given an element id,
    // return a reference to the element
    function grab(x){
    return document.getElementById? document.getElementById(x) :
    document.all? document.all[x] : "";
    }

    // Given an element id and image,
    // change the background of the element to the image
    function changeBGimg(id, image){
    var x = grab(id);
    if (x.style){
    x.style.backgroundImage = 'url(' + image + ')';
    }

    }

    </script>
    <table border="1">
    <tr>
    <td onclick="
    changeBGimg('cellA','a.jpg');
    ">Click to change background</td>
    <td id="cellA"><div style="width:200px; height: 150px;"></div></td>
    </tr>
    </table>
    </body</html>
     
    RobG, Apr 25, 2005
    #6
  7. Keith Smith

    Grant Wagner Guest

    Instead of feature testing everytime you execute grab(), one can define
    grab once at the beginning of the page and then reasonably assume that
    the feature support will not change in that user agent for the lifetime
    of the script:

    <script type="text/javascript">
    var grab;
    if (document.getElementById)
    {
    grab = function(o)
    {
    return document.getElementById(o);
    }
    }
    else if (document.all)
    {
    grab = function(o)
    {
    return document.all[o];
    }
    }
    else
    {
    grab = function()
    {
    return { style:{} };
    }
    }
    Since your code makes the assumption that grab() is returning an object
    that contains a property named -style-, but in some cases your version
    of grab() returns an empty string, the line above may generate an error
    on user agents which support neither document.getElementById nor
    document.all.

    In cases where the user agent supports neither document.getElementById
    nor document.all, my solution returns an object with a -style- property
    which can other arbitrary properties assigned to it.

    Note that I'm not 100% convinced this is an adequate solution, but since
    we tend to assume that the Node returned by document.getElementById and
    document.all supports a -style- property, it seems reasonable to return
    an object that has one even when we don't obtain a valid Node.
     
    Grant Wagner, Apr 25, 2005
    #7
  8. Omit the Comment Declaration Open delimiter (`<!--'), the JS single-line
    comment (`//') and the Comment Declaration Close (`-->') delimiter. They
    serve no reasonable purpose here.
    WFM, however I would rather use

    setStyleProperty("id", "tablecell", 0,
    "backgroundImage", "url(images/image1.jpg)");

    from <http://pointedears.de/scripts/dhtml.js> instead.


    PointedEars
     
    Thomas 'PointedEars' Lahn, May 8, 2005
    #8
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.