inserting image into table cell using dom distorting

A

Andrew Poulos

I'm using the following code to create a small table with one column and
two rows. An image goes into the first cell.

//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";
t.style.left = "100px";
t.style.top = "100px";
t.style.width = "200px";

// create tbody
var b = document.createElement("b");

// add row
var r = document.createElement("TR");
// add cell
var c = document.createElement("TD");
c.setAttribute("height","200");
// put image into cell
var i = document.createElement("IMG");
i.setAttribute("src","pics/one.png");
c.appendChild(i);
r.appendChild(c);
b.appendChild(r);

// add row
var r = document.createElement("TR");
// add cell
c = document.createElement("TD");
// put text into cell
var txt = document.createTextNode("desc of image one");
c.appendChild(txt);
r.appendChild(c);
b.appendChild(r);

// append to doc
t.appendChild(b);
document.body.appendChild(t);

This display fine (correctly?) in MZ but IE stretches the image to fit
the size of the cell. I'm actually picking the image dynamically so I
won't know it's size. Is there a way I can do this without the image
distorting?

Andrew Poulos
 
R

RobG

Andrew said:
I'm using the following code to create a small table with one column and
two rows. An image goes into the first cell.

//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";
t.style.left = "100px";
t.style.top = "100px";
t.style.width = "200px";

// create tbody
var b = document.createElement("b");
Click to expand...

I think what you really want here is:

var b = document.createElement("tbody");

or do you really want to append your said:
// add row
var r = document.createElement("TR");
// add cell
var c = document.createElement("TD");
c.setAttribute("height","200");
Click to expand...

c.style.height = "200";
// put image into cell
var i = document.createElement("IMG");
i.setAttribute("src","pics/one.png");
c.appendChild(i);
r.appendChild(c);
b.appendChild(r);

// add row
var r = document.createElement("TR");
// add cell
c = document.createElement("TD");
// put text into cell
var txt = document.createTextNode("desc of image one");
c.appendChild(txt);
r.appendChild(c);
b.appendChild(r);

// append to doc
t.appendChild(b);
document.body.appendChild(t);
Click to expand...

This will not work in Firefox or IE. Use:

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

docBody.appendChild(t);
This display fine (correctly?) in MZ but IE stretches the image to fit
the size of the cell. I'm actually picking the image dynamically so I
won't know it's size. Is there a way I can do this without the image
distorting?
Click to expand...

For me, the image does not distort in either Firefox or IE. If the
image is bigger than the cell or row or table, the cell/row/table is
expanded to fit the image (though that can be overridden with the style
overflow attribute I guess).

Full code:

//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";
t.style.left = "100px";
t.style.top = "100px";
t.style.width = "20px";
t.style.border = "1px solid red";

// create tbody
var b = document.createElement("tbody");
// create row
var r = document.createElement("TR");
// create cell
var c = document.createElement("TD");
c.style.height = "200";
c.style.border = "1px solid blue";
c.style.textAlign = "center";


// create image
var i = document.createElement("IMG");
i.src = "a.gif";
i.style.border = "1px solid pink";

// Append elements
c.appendChild(i); // add image to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// create another row
var r = document.createElement("TR");
// create another cell
c = document.createElement("TD");
c.style.border = "1px solid green";
c.style.textAlign = "center";
// create text node
var txt = document.createTextNode("desc of image one");
c.appendChild(txt); // add text to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// append to doc
t.appendChild(b);

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

docBody.appendChild(t);
 
R

RobG

RobG wrote:
[...]
This will not work in Firefox or IE. Use:
Click to expand...

Oops, yes it does. However I think it's still better to use the method
I suggest below - any comments?
if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

docBody.appendChild(t);
Click to expand...
 
A

Andrew Poulos

[snip]
Full code:

//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";
t.style.left = "100px";
t.style.top = "100px";
t.style.width = "200px";
t.style.border = "1px solid red";

// create tbody
var b = document.createElement("tbody");
Click to expand...

I could be wrong (it happened while I was editing something else and so
I haven't had a chance to test it fully) but if I leave off TBODY
creation the table doesn't get created in IE.
// create row
var r = document.createElement("TR");
// create cell
var c = document.createElement("TD");
c.style.height = "200";
c.style.border = "1px solid blue";
c.style.textAlign = "center";


// create image
var i = document.createElement("IMG");
Click to expand...

So far all I've change is my line
i.setAttribute("src", "a.gif"); to match your next line and now the
image doesn't distort in IE.
i.src = "a.gif";
i.style.border = "1px solid pink";

// Append elements
c.appendChild(i); // add image to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// create another row
var r = document.createElement("TR");
// create another cell
c = document.createElement("TD");
c.style.border = "1px solid green";
c.style.textAlign = "center";
// create text node
var txt = document.createTextNode("desc of image one");
c.appendChild(txt); // add text to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// append to doc
t.appendChild(b);

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}
Click to expand...

I like the lesser amount of typing with document.body but I'll go back
to 'standards'.
docBody.appendChild(t);
Click to expand...

Thanks, I'll let you know the noticeable difference the other changes make.

Andrew Poulos
 
A

Andrew Poulos

If I put the code into a loop to create 4 separate tables. In IE, the
first, second and fourth images are not distorted whereas the third
image is:

var numTables = 4;
for (var i = 0; i<numTables; i++) {
//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";
Click to expand...
t.style.left = 100 + i*250 + "px";
t.style.top = "100px";
t.style.width = "200px";
t.style.border = "1px solid red";

// create tbody
var b = document.createElement("tbody");
// create row
var r = document.createElement("TR");
// create cell
var c = document.createElement("TD");
c.style.height = "200";
c.style.border = "1px solid blue";
c.style.textAlign = "center";

// create image
var i = document.createElement("IMG");
i.src = "a.gif";
i.style.border = "1px solid pink";

// Append elements
c.appendChild(i); // add image to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// create another row
var r = document.createElement("TR");
// create another cell
c = document.createElement("TD");
c.style.border = "1px solid green";
c.style.textAlign = "center";
// create text node
var txt = document.createTextNode("desc of image one");
c.appendChild(txt); // add text to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// append to doc
t.appendChild(b);

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

docBody.appendChild(t);
Click to expand...
}

It's very strange. I've tried it using different images but it keeps
happening.

ANdrew Poulos
 
R

RobG

Andrew said:
If I put the code into a loop to create 4 separate tables. In IE, the
first, second and fourth images are not distorted whereas the third
image is:
Click to expand...

It should only create one table and image:
var numTables = 4;
for (var i = 0; i<numTables; i++) {
Click to expand...

Here you initialise i as a counter for your for loop.
t.style.left = 100 + i*250 + "px";
Click to expand...

And use it here for your buffer between tables (they will overlap if
the image is greater than 250px wide) - which is fine.

[...]
BUT... here you re-initialise i as an image element. I can't
understand how IE still only loops 4 times, Safari just barfed after
the first loop.

[...]
if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}
Click to expand...
Click to expand...

I would put this before the for loop - you only need to find the body
reference once.
 
A

Andrew Poulos

RobG said:
Andrew said:
If I put the code into a loop to create 4 separate tables. In IE, the
first, second and fourth images are not distorted whereas the third
image is:
Click to expand...


It should only create one table and image:
var numTables = 4;
for (var i = 0; i<numTables; i++) {
Click to expand...

Here you initialise i as a counter for your for loop.
t.style.left = 100 + i*250 + "px";
Click to expand...

And use it here for your buffer between tables (they will overlap if
the image is greater than 250px wide) - which is fine.

[...]
Click to expand...

I moved the previous line to after
c.appendChild(myimg)
and now it seems to work correctly in IE.
BUT... here you re-initialise i as an image element. I can't
understand how IE still only loops 4 times, Safari just barfed after
the first loop.

[...]
Click to expand...

Dang I've been clumsy - it's now 'myimg'.
if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}
Click to expand...
Click to expand...


I would put this before the for loop - you only need to find the body
reference once.
Click to expand...

Thanks, I've moved it out of the loop.

Though I've got it working now if I move the myimg.src line back to it's
original line position it also works but during testing, after I've run
the file a while, it fails. Once it fails if I move the line and test it
it works. Then if I move the line back it works for a short while again.

I guess this is why people love IE so much.

Andrew Poulos
 
R

Richard Cornford

RobG said:
Andrew Poulos wrote:
document.body.appendChild(t);
Click to expand...

This will not work in Firefox or IE. Use:

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

docBody.appendChild(t);
Click to expand...
<snip>

The W3C HTML DOM specification defines a "body" property of the
HTMLDocument interface. Like all of the pre-existing features formalised
in the HTML DOM specification, it is very well supported (and obviously
completely 'standard' coding).

Indeed it can easily be argued that using - document.body - is superior
to - document.getElementsByTagName('body')[0] -. It is obviously less
involved to resolve a simple property accessor rather than property
reference, method call with DOM search, collection building and then
collection member referencing. Particularly as the W3C require the
nodeList object returned from getElementsByTagName to be 'live', making
a quite a complex object to be creating and then throwing away within a
single expression.

Richard.
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Only one table shows up with the information 2
Image shifts to the right when export the page to pdf 4
How can I create a table using the input element? 1
How to add dropdown selected data to table using jquery 2
createElement and IE on different machines 9
Inserting Table Rows conditionally 3
I am trying to detect Which image id="" was clicked ? 22
DOM table simple question 3

Members online

No members online now.
Total: 64 (members: 0, guests: 64)
Robots: 444

Forum statistics

Threads
473,982
Messages
2,570,190
Members
46,736
Latest member
zacharyharris

Latest Threads

Top