PDA

View Full Version : Issue adding multiple TD elements in IE

dlouwe
05-04-2007, 06:25 PM
Essentially what I am doing is creating a table using javascript, but when I try to add a second TD element to the second TR, it appears not to be there. At least, it doesn't in IE; this works fine in FF.

( this.newElement is a function I've defined for creating dom elements, it has other parameters but I've excluded them for simplicity's sake )

var objDIV = this.newElement("div");
var objTABLE = this.newElement("table");
var objTBODY = this.newElement("tbody");
var objTR1 = this.newElement("tr");
var objTR2 = this.newElement("tr");
var objTD1 = this.newElement("td");
var objTD2 = this.newElement("td");
var objTD3 = this.newElement("td");
var objIFRAME1 = this.newElement("iframe");
var objIFRAME2 = this.newElement("iframe");

objTD1.setAttribute("colspan","2");

document.body.appendChild( objDIV );
objDIV.appendChild( objTABLE );
objTABLE.appendChild( objTBODY );
objTBODY.appendChild( objTR1 );
objTBODY.appendChild( objTR2 );
objTR1.appendChild( objTD1 );
objTD2.appendChild( objIFRAME1 );
objTD3.appendChild( objIFRAME2 );
objTR2.appendChild( objTD2 );
objTR2.appendChild( objTD3 );


I have an inkling that it has to do with the colspan, but I've attempted several methods for setting it and none have worked.
david_kw
05-04-2007, 06:56 PM
Interesting. I didn't see exactly the problem you mentioned but it does appear that colspan has a problem being set by the DOM functions after the element has been created in IE. That was interesting because I was able to set the align property after it was created. Anyway, after some searching I found a workaround here

http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/

Which essentially does the creation differently for IE with


var objTD1;
try {
objTD1 = document.createElement("<td colspan='2'>");
} catch (e) {
objTD1 = document.createElement("td");
objTD1.setAttribute("colspan","2");
}


Since the code dies in FF it will run the catch code for the creation. Perhaps there is a better way but this one was interesting. Anyway, here is my test code as well in case it is useful.


<html>
<head>
</head>
<body>
<script type="text/javascript">
var objDIV = document.createElement("div");
var objTABLE = document.createElement("table");
var objTBODY = document.createElement("tbody");
var objTR1 = document.createElement("tr");
var objTR2 = document.createElement("tr");
var objTD1;
try {
objTD1 = document.createElement("<td colspan='2'>");
} catch (e) {
objTD1 = document.createElement("td");
objTD1.setAttribute("colspan","2");
}
var objTD2 = document.createElement("td");
var objTD3 = document.createElement("td");
var objIFRAME1 = document.createElement("iframe");
var objIFRAME2 = document.createElement("iframe");

objTD1.setAttribute("align","center");
objTD1.appendChild(document.createTextNode("Title"));

document.body.appendChild( objDIV );
objDIV.appendChild( objTABLE );
objTABLE.appendChild( objTBODY );
objTBODY.appendChild( objTR1 );
objTBODY.appendChild( objTR2 );
objTR1.appendChild( objTD1 );
objTD2.appendChild( objIFRAME1 );
objTD3.appendChild( objIFRAME2 );
objTR2.appendChild( objTD2 );
objTR2.appendChild( objTD3 );
</script>
</body>
</html>


david_kw
dlouwe
05-04-2007, 07:09 PM
Excellent, that worked perfectly. Thanks so much for the speedy reply.

... now I can get to making the rest of this site work in IE, joy.
dlouwe
05-04-2007, 07:26 PM
Oh wow, actually, total head-smacker here.


objTD1.colSpan = '2';


This totally works, both in IE and FF. I tried something similar, but used the all lower-case version of 'colspan', which unfortunately isn't quite the same.

Still, thanks though for the help, it was the link you provided that led me to the correct property name.
david_kw
05-04-2007, 11:58 PM
Ahh good to know. I tried .colspan too which didn't work , but not .colSpan which apparently does.

Glad it worked out for you.

david_kw