How to change cell background?

Keith Smith · Apr 24, 2005

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.

Mick White · Apr 24, 2005

Keith said:
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.

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

Mick

RobB · Apr 24, 2005

Keith said:
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.

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

azcn2503 · Apr 24, 2005

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

Put this in the <HEAD>:

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

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

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

Keith Smith · Apr 24, 2005

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"></script>

It doesn't seem to work for me. Would someone mind giving it a try and let
me know if it works for you?

RobG · Apr 25, 2005

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

Click to expand...

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.

It doesn't seem to work for me. Would someone mind giving it a try and let
me know if it works for you?

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>

Grant Wagner · Apr 25, 2005

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

Put this in the <HEAD>:

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

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:{} };
}
}

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

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

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.

Thomas 'PointedEars' Lahn · May 8, 2005

Keith said:
<script type="text/javascript"></script>

Click to expand...

Omit the Comment Declaration Open delimiter (`') delimiter. They
serve no reasonable purpose here.

It doesn't seem to work for me. Would someone mind giving it a try and
let me know if it works for you?

WFM, however I would rather use

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

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

PointedEars

How to change background color to fit shape	1	Feb 11, 2023
Changing a background-color	2	Aug 2, 2023
Background image not showing up on html page	3	Sep 23, 2023
Change to background image.	5	Dec 18, 2018
How do I remove the background of an image (Pygame)	0	Dec 23, 2022
Animate a background image	0	May 4, 2022
Looking to change programming direction	1	Aug 10, 2022
Code for background image in website?	3	Jul 19, 2022

How to change cell background?

Keith Smith

Mick White

RobB

azcn2503

Keith Smith

RobG

Grant Wagner

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads