Hi Rob,
Thanks a million, it works, I am so happy. I also analysed the code and
I think I understand it.
-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.
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="
http://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
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:
-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;
cell.style.backgroundImage = '';
cell.style.background = '';
cell.background = '';
cell.setAttribute('background', '');
}
var j = happyimages.length;
while ( j-- ) {
happyimage = happyimages;
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.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;
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++ ) {
//...
}
[...]