how to set background of TD without an ID to none

[proximus]

Hi,

I am trying to change the background of table TD's. The problem is that
I have no access to the HTML code. SO I am trying to alter this using
Javascript/DOM in an external .js file.

I have tried lot's of things and spent hours on this, I thought I might
give it a try here. One of the TD's uses HTML to set the background,
the other one uses CSS styling:

<td background="image1.gif" style="background-repeat: repeat-x;"

</td>

<td style="background-image: url(image2.gif);background-repeat:
repeat-x;"></td>

As you can see the TD's do not have an ID.

I tried to use getElementsByTagName, but it doesnt seem to work. I am
not a programmer unfortunately.

Is there a way to target TD's, maybe even these specific TD's using
nodes (if I understand nodes at all...).

cheers, Kor

[RobG]

pr******@operamail.com wrote:

Hi,

I am trying to change the background of table TD's. The problem is that
I have no access to the HTML code. SO I am trying to alter this using
Javascript/DOM in an external .js file.

I have tried lot's of things and spent hours on this, I thought I might
give it a try here. One of the TD's uses HTML to set the background,
the other one uses CSS styling:

<td background="image1.gif" style="background-repeat: repeat-x;"
There is no attribute 'background' for TD elements in the HTML 4
specification. There is a depreciated background attribute for the BODY
element, but it should never be used on a TD.

However, if a background attribute is coded in a TD's HTML source, both
IE and Firefox will display it - which is one of the reasons why support
for invalid markup is a contentious issue. Removal of the invalid
attribute is shown below.

</td>

<td style="background-image: url(image2.gif);background-repeat:
repeat-x;"></td>

That is one of the valid ways to add a background image to a TD.


As you can see the TD's do not have an ID.

I tried to use getElementsByTagName, but it doesnt seem to work. I am
not a programmer unfortunately.
When you say 'doesn't work' you should specify what you tried, what you
expected to happen and then what actually did happen.

Is there a way to target TD's, maybe even these specific TD's using
nodes (if I understand nodes at all...).

Yes, but the effort you spend on sniffing out the subject TD is directly
proportional to the fragility of the code. So here is a very general
method which will hopefully not do too much more damage than you can
tolerate.

It supposes that the table has an ID - if not, you will have to feed it
all the TDs in the document.

<script type="text/javascript">

function removeTdBackground( el ) {
if ( !document.getElementsByTagName ) return;

var cell, cells = el.getElementsByTagName('td');
if ( !cells.length || !cells[0].style ) return;

var i = cells.length;
while ( i-- ) {
cell = cells[i];
cell.style.backgroundColor = '';
cell.style.backgroundImage = '';
cell.style.background = '';
cell.background = '';
cell.setAttribute('background', '');
// anything else while we're here....
}
}

</script>

<table id="tableA" width="300">
<tr>
<td background="a.gif" style="background-repeat: repeat-x;">
&nbsp;</td>
<td style="background-image: url(a.gif);
background-repeat: repeat-x;">&nbsp;</td>
</tr>
</table>

<input type="button" value="Remove cell styles" onclick="
removeTdBackground( document.getElementById('tableA') );
">
I should note that normally you can access the properties of an element
directly, so removing the background using the following should work:

cell.background = '';

That seems to work in IE, but not in Firefox hence I've used
setAttribute which appears to work in both. You may want to test more
widely and maybe use both remove statements (it isn't harmful to
Firefox, just ineffective).

To apply the script to every TD in the document, change the call to:

removeTdBackground( document.body );

Note that either getElementsByTagName or the style object may not be
supported by some older browsers.
--
Rob

[proximus]

Hi Rob,

Thanks a million, it works, I am so happy. I also analysed the code and
I think I understand it.

When you say 'doesn't work' you should specify what you tried, what you
expected to happen and then what actually did happen.

-What I tried was a.o.:

document.TableData.background=none;
(http://www.w3schools.com/htmldom/dom_obj_tabledata.asp)
and
document.getElementsByTagName('td').background="ht tp://www.someplace.com/image.gif";

etc etc, played with quotes, double quotes etc.

-What I expected to happen was to not see a background picture in the
table cell, but nothing instead, or second option, a transparent gif
instead;

-What happened was just nothing, the images were still visible.
But not anymore

I tried to extend your code, can you maybe tell me (if you have the
time)if this make sense?: (it doesnt work, but I suspect that a
document.write which does something with images messes it up, or maybe
the code is just wrong)
function removeTdBackground( el ) {
if ( !document.getElementsByTagName ) return;

var cell, happyimage, cells = el.getElementsByTagName('td'),
happyimages = el.getElementsByTagName('img');
if ( !cells.length || !cells[0].style || !happyimages.length ||
!happyimages[0].style) return;

var i = cells.length;
while ( i-- ) {
cell = cells[i];
cell.style.backgroundImage = '';
cell.style.background = '';
cell.background = '';
cell.setAttribute('background', '');
}

var j = happyimages.length;
while ( j-- ) {
happyimage = happyimages[i];
happyimage.scr = 'http://www.someplace.com/image.gif';
//maybe the .scr is not right

}
}
Thanks again!
Kor

[Markis Taylor]

happyimage.scr = 'http://www.someplace.com/image .gif';

is not correct

happyimage.src = 'http://www.someplace.com/image .gif';

is what it should be.

So you were correct about that that line of code was wrong.

[RobG]

pr******@operamail.com wrote:

Hi Rob,

Thanks a million, it works, I am so happy. I also analysed the code and
I think I understand it.

When you say 'doesn't work' you should specify what you tried, what you
expected to happen and then what actually did happen.

-What I tried was a.o.:

document.TableData.background=none;

You can't use that syntax for accessing a table. The collections that
you can access using HTMLdocument (i.e. document.<something>) are
anchors, applets, images, forms and links.

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268>

To get a reference to the 2nd form in the document you can use:

var formTwo = document.forms[1]; // Note they are numbered from 0

Supposing that your table has an id of 'TableData', then you can get a
reference to it with getElementById:

var table = document.getElementById('TableData');

The table element does not have a background attribute: the body element
does but it's depreciated, so don't use it at all, use CSS.

<URL:http://www.w3.org/TR/html4/struct/global.html#adef-background>

If you want to modify any property of any element, you need to use an
appropriate value. Supposing you want to modify the body background
attribute, it requires a URI which must be a string. So whatever is
assigned to the document.body.background attribute must be a string (or
something that resolves to a string).

String literals in JavaScript must be quoted, otherwise the script
engine will try to evaluate it (and possibly fail or do something
unexpected). If you want to remove the value in the body's background
attribute, then set it to an empty string:

document.body.background = '';

Otherwise it should be a valid URI.
(http://www.w3schools.com/htmldom/dom_obj_tabledata.asp)
That link tells you that the table background property is IE only and is
not part of the W3C HTML 4 specification.
and
document.getElementsByTagName('td').background="ht tp://www.someplace.com/image.gif";
document.getElementsByTagName() will return a collection (like an array
but a bit different - it implements the nodeList interface which has one
property 'length' and one method 'index') that contains all the TD
elements in the document. It does not have a background property - you
may be able to give it one but it won't know what to do with it.

getElementsByTagName:
<URL:http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-A6C9094>

Interface nodeList
<URL:http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-536297177>
etc etc, played with quotes, double quotes etc.
Using double & single quotes can be a bit confusing, have a read of
Peter-Paul Koch's page on strings:

<URL:http://www.quirksmode.org/js/strings.html>

-What I expected to happen was to not see a background picture in the
table cell, but nothing instead, or second option, a transparent gif
instead;

-What happened was just nothing, the images were still visible.
But not anymore

I tried to extend your code, can you maybe tell me (if you have the
time)if this make sense?: (it doesnt work, but I suspect that a
document.write which does something with images messes it up, or maybe
the code is just wrong)
Without seeing the document.write statement it's hard to tell ;-) but
generally whatever it writes is equivalent to the same thing in the HTML
source.


function removeTdBackground( el ) {
if ( !document.getElementsByTagName ) return;
This line tests if the browser supports getElementsByTagName and exits
cleanly if it doesn't - the vast majority of browsers do, but there are
a few that may still fail.

var cell, happyimage, cells = el.getElementsByTagName('td'),
happyimages = el.getElementsByTagName('img');
if ( !cells.length || !cells[0].style || !happyimages.length ||
!happyimages[0].style) return;
You only need to test for support for the style object once, so the
second one can go. The images collection already exists, you don't need
to use getElementsByTagName, so you could write:

happyimages = document.images;

which should be a lot faster and the test would be:

if ( !cells.length || !cells[0].style || !happyimages.length ) return;

var i = cells.length;
while ( i-- ) {
cell = cells[i];
cell.style.backgroundImage = '';
cell.style.background = '';
cell.background = '';
cell.setAttribute('background', '');
}

var j = happyimages.length;
while ( j-- ) {
happyimage = happyimages[i];
Storing a reference to a collection item is useful if you are going to
use it multiple times (for speed and neater), but for one-of it's
suitable to not bother.

happyimages[i].src = 'http://www.someplace.com/image.gif';
In that vein, it's also suitable to use a short variable name (if you
are going to keep a reference):

hi = happyimages[i];
hi.src = 'http://www.someplace.com/image.gif';
happyimage.scr = 'http://www.someplace.com/image.gif';
//maybe the .scr is not right

The IMG element does not have an 'scr' attribute, I think you're looking
for 'src'.

<URL:http://www.w3.org/TR/html4/struct/objects.html#adef-src-IMG>

Otherwise, the code looks fine. Just note that using while as above
will go through the collections backwards - which is sometimes faster
but may be slower on some platforms in some contexts and is occasionally
inconvenient. For small collections (say less than 50 items) speed is
likely totally irrelevant.

I prefer to code that way, a 'forward looping' alternative would be:

for ( var i=0, j=happyimages.length; i<j; i++ ) {
//...
}

[...]

--
Rob

[proximus]

Rob,
Thank you very much. A lot to chew on, a lot to learn. I am going to
try this.
-Kor