Andrew Poulos wrote:
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");
I think what you really want here is:
var b = document.createElement("tbody");
or do you really want to append your <TR> to a <B> element? :-)
// add row
var r = document.createElement("TR");
// add cell
var c = document.createElement("TD");
c.setAttribute("height","200");
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);
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?
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);
--
Rob
