Internet Explorer won't append table rows using appendChild

KScript · 12-31-2012, 11:00 AM

I have tried the code which Vlaad has resolved saying that tbody tag to tr resolved it but I am still facing this issue on IE , hear the code

var tbody = document.createElement('tbody');
var link = document.createElement('a');
var span = document.createElement('span');
var txt = "EPSON GPS Receiver Module S4E398600010000";
var image = document.createElement('img');
var tr = document.createElement('tr');
var td = document.createElement('td');
link.setAttribute('href','#1');
span.setAttribute('class','editorialQuickLinkTitle');
link.innerHTML = txt;
span.appendChild(link);
image.setAttribute('src','/Images/Logos/Miniatures/epson.png');
image.setAttribute('border','0');
image.setAttribute('vspace','5');
image.setAttribute('hspace','5');
td.setAttribute('class','block');
td.appendChild(span);
td.appendChild(document.createElement('br'));
td.appendChild(image);
tr.appendChild(td);
tbody.appendChild(tr);
document.getElementById("previews").appendChild(tbody);

Please let me know what went wrong...

Thanks, in advance.....

niralsoni · 12-31-2012, 12:03 PM

Assuming "previews" is your table, it would be something like this -
(unwanted code has been commented out)

Code:

//var tbody = document.createElement('tbody');	
var link = document.createElement('a');
var span = document.createElement('span');
var txt = "EPSON GPS Receiver Module S4E398600010000";
var image = document.createElement('img');
//var tr = document.createElement('tr');
//var td = document.createElement('td');
link.setAttribute('href','#1');
span.setAttribute('class','editorialQuickLinkTitle');
link.innerHTML = txt;
span.appendChild(link);
image.setAttribute('src','/Images/Logos/Miniatures/epson.png');
image.setAttribute('border','0');
image.setAttribute('vspace','5');
image.setAttribute('hspace','5');
//td.setAttribute('class','block');
//td.appendChild(span);
//td.appendChild(document.createElement('br'));
//td.appendChild(image);
//tr.appendChild(td);
//tbody.appendChild(tr);
//document.getElementById("previews").appendChild(tbody);

var tbl = document.getElementById("previews");
var tr = tbl.insertRow(tbl.rows.length);
var td = tr.insertCell(tr.cells.length);
td.setAttribute('class','block');
td.appendChild(span);
td.appendChild(document.createElement('br'));
td.appendChild(image);

Hope it helps you out...

Regards,
Niral Soni

DaveyErwin · 12-31-2012, 01:13 PM

Assuming "previews" is a div ....

Code:

 
<html>
<body>
<div id="previews"></div>
<script type="text/javascript">
var table = document.createElement('table'); 
var tbody = document.createElement('tbody'); 
var link = document.createElement('a');
var span = document.createElement('span');
var txt = "EPSON GPS Receiver Module S4E398600010000";
var image = document.createElement('img');
var tr = document.createElement('tr');
var td = document.createElement('td');
link.setAttribute('href','#1');
span.setAttribute('class','editorialQuickLinkTitle');
link.innerHTML = txt;
span.appendChild(link);
image.setAttribute('src','/Images/Logos/Miniatures/epson.png');
image.setAttribute('border','0');
image.setAttribute('vspace','5');
image.setAttribute('hspace','5');
td.setAttribute('class','block');
td.appendChild(span);
td.appendChild(document.createElement('br'));
td.appendChild(image);
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody)
document.getElementById("previews").appendChild(table);
</script>
</body>
</html>

both chrome and firefox display
the table without the table tag
IE does not.

Old Pedant · 12-31-2012, 07:59 PM

But the recommended way to do this is *NOT* to use createElement("tr") or createElement("td")!!

Instead, you should use table.insertRow() and tr.insertCell().

Something like this:

Code:

<html>
<body>
<table id="theTable"></table>

<script type="text/javascript">
function addRow( txt, imageurl )
{
    var table = document.getElementById('theTable'); 
    var tr = table.insertRow(-1);
    var td = tr.insertCell(-1);
   
    var link = document.createElement('a');
    link.href = "#1"; // or use setAttribute, though why?
    link.innerHTML = txt;

    var span = document.createElement('span');
    span.className = 'editorialQuickLinkTitle'; // or setAttribute, but why?

    span.appendChild(link);
    
    var image = document.createElement('img');
    image.src = imageurl;
    image.setAttribute('border','0');
    image.setAttribute('vspace','5');
    image.setAttribute('hspace','5');

    td.className = "block";
    td.appendChild(span);
    td.appendChild(document.createElement('br'));
    td.appendChild(image);
}

addRow( "EPSON GPS Receiver Module S4E398600010000",
        '/Images/Logos/Miniatures/epson.png' );

</script>
</body>
</html>

The -1 in the calls to insertRow and insertCell say "put it at the end". If you omit the argument, the row/cell is inserted as the FIRST row/cell. Or you can use any number to insert anywhere.

Note you you do *NOT* then use appendChild, at all.

felgall · 12-31-2012, 09:54 PM

Quote:

Originally Posted by Old Pedant

But the recommended way to do this is *NOT* to use createElement("tr") or createElement("td")!!

Instead, you should use table.insertRow() and tr.insertCell().

Just to expand on that - there are only two elements in a table where you need to use createElement - for the table itself and for the one or more tbody tags that the table contains. All of the other table elements can be created more efficiently and with far easier to read code using the appropriate table properties and methods.

KScript · 01-01-2013, 02:50 PM

Thanks DaveyErwin, it worked...

So I tried the exact one on which Am try to work on....
But this fails , Can you please let me know what Exactly is wrong here ... sorry bad at JS.

Code below :
************
<html>
<title> test dom </title>
<head>
<script>
function call(){
alert("call made");
}
function pictureDiv(){
var mainTable = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
td["valign"] = "bottom";
tr.appendChild(td);

var picDiv = document.createElement("div");
picDiv["id"] = "x";
picDiv.style.cssText = "width:180px";

var table = document.createElement("table");
table["border"] = "1";
table["valign"] = "bottom";
table["cellpadding"] = "0";
table["cellspacing"] = "0";
table.style.cssText = "padding-bottom:10";
picDiv.appendChild(table);

var tr1 = document.createElement("tr");
var td1 = document.createElement("td");
table.appendChild(tr1);
tr1.appendChild(td1);

var img = document.createElement("img");
img["id"] = "y";
img["src"] ="x.gif";

td1.appendChild(img);

var td2 = document.createElement("td");
td2["valign"] = "bottom";

tr1.appendChild(td2);

var resDiv = document.createElement("div");
resDiv["id"] = "resolutionwarning";
resDiv.style.cssText = "margin-left: 5px;";

td2.appendChild(resDiv);

var atag = document.createElement("a");
atag["href"] ="";
atag["onclick"] = "call()";

resDiv.appendChild(atag);

var resImg = document.createElement("img");
resImg["id"] = "z";
resImg["src"] = "y.gif";
resImg["width"] = "9";
resImg["height"] = "9";
resImg["border"] = "0";
resImg["align"] = "absbottom";
resImg["alt"] = " not recommended ";

atag.appendChild(resImg);

var tr2 = document.createElement("tr");
var td3 = document.createElement("td");

tr2.appendChild(td3);

var text = document.createTextNode('4x6');
td3.appendChild(text);

picDiv.appendChild(tr2);

td.appendChild(picDiv);
mainTable.appendChild(tbody);
tbody.appendChild(tr);

document.getElementById("previews").appendChild(mainTable);
}
</script>
</head>
<body onload = "pictureDiv()">
Test page....
<div id = "previews"></div>
</body>
</html>

*************
Thanks inAdvance.

KScript · 01-01-2013, 03:28 PM

Did any one get chance to check below the code , quick revert is appreciated.

As posted earlier

Code below :
************
<html>
<title> test dom </title>
<head>
<script>
function call(){
alert("call made");
}
function pictureDiv(){
var mainTable = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
td["valign"] = "bottom";
tr.appendChild(td);

var picDiv = document.createElement("div");
picDiv["id"] = "x";
picDiv.style.cssText = "width:180px";

var table = document.createElement("table");
table["border"] = "1";
table["valign"] = "bottom";
table["cellpadding"] = "0";
table["cellspacing"] = "0";
table.style.cssText = "padding-bottom:10";
picDiv.appendChild(table);

var tr1 = document.createElement("tr");
var td1 = document.createElement("td");
table.appendChild(tr1);
tr1.appendChild(td1);

var img = document.createElement("img");
img["id"] = "y";
img["src"] ="x.gif";

td1.appendChild(img);

var td2 = document.createElement("td");
td2["valign"] = "bottom";

tr1.appendChild(td2);

var resDiv = document.createElement("div");
resDiv["id"] = "resolutionwarning";
resDiv.style.cssText = "margin-left: 5px;";

td2.appendChild(resDiv);

var atag = document.createElement("a");
atag["href"] ="";
atag["onclick"] = "call()";

resDiv.appendChild(atag);

var resImg = document.createElement("img");
resImg["id"] = "z";
resImg["src"] = "y.gif";
resImg["width"] = "9";
resImg["height"] = "9";
resImg["border"] = "0";
resImg["align"] = "absbottom";
resImg["alt"] = " not recommended ";

atag.appendChild(resImg);

var tr2 = document.createElement("tr");
var td3 = document.createElement("td");

tr2.appendChild(td3);

var text = document.createTextNode('4x6');
td3.appendChild(text);

picDiv.appendChild(tr2);

td.appendChild(picDiv);
mainTable.appendChild(tbody);
tbody.appendChild(tr);

document.getElementById("previews").appendChild(mainTable);
}
</script>
</head>
<body onload = "pictureDiv()">
Test page....
<div id = "previews"></div>
</body>
</html>

*************
Thanks inAdvance.[/QUOTE]

DaveyErwin · 01-01-2013, 05:05 PM

more like this,
you needed a tbody
for the table also the
onclick assignment was wrong

<html>
<title> test dom </title>
<head>
<script>
function call(){
alert("cal made");
}
function pictureDiv(){
var mainTable = document.createElement("table");
var tbody = document.createElement("tbody");////////////////
var tbody1 = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
td["valign"] = "bottom";
tr.appendChild(td);
　
　
var picDiv = document.createElement("div");
picDiv["id"] = "x";
picDiv.style.cssText = "width:180px";
var table = document.createElement("table");
table["border"] = "1";
table["valign"] = "bottom";
table["cellpadding"] = "0";
table["cellspacing"] = "0";
table.style.cssText = "padding-bottom:10";
picDiv.appendChild(table);
var tr1 = document.createElement("tr");
var td1 = document.createElement("td");
table.appendChild(tbody1);/////////////////////////////
tbody1.appendChild(tr1);/////////////////////////////
tr1.appendChild(td1);
var img = document.createElement("img");
img["id"] = "y";
img["src"] ="x.gif";
td1.appendChild(img);
var td2 = document.createElement("td");
td2["valign"] = "bottom";
tr1.appendChild(td2);
var resDiv = document.createElement("div");
resDiv["id"] = "resolutionwarning";
resDiv.style.cssText = "margin-left: 5px;";
td2.appendChild(resDiv);
var atag = document.createElement("a");
atag["href"] ="";
atag["onclick"] = call;///////////////////////////////////////
resDiv.appendChild(atag);
var resImg = document.createElement("img");
resImg["id"] = "z";
resImg["src"] = "y.gif";
resImg["width"] = "9";
resImg["height"] = "9";
resImg["border"] = "0";
resImg["align"] = "absbottom";
resImg["alt"] = " not recommended ";
atag.appendChild(resImg);
var tr2 = document.createElement("tr");
var td3 = document.createElement("td");
tr2.appendChild(td3);
var text = document.createTextNode('4x6');
td3.appendChild(text);
picDiv.appendChild(tr2);
td.appendChild(picDiv);
mainTable.appendChild(tbody);
tbody.appendChild(tr);
document.getElementById("previews").appendChild(mainTable);
}
</script>
</head>
<bodyonload="pictureDiv()">
Test page....
<divid="previews"></div>
</body>
</html>

KScript · 01-01-2013, 06:03 PM

Thanks for the effort and help DaveyErwin,

I tried a lot and came to solution already, I can just tell all who ever constructs table in dom, must make sure , you use the tbody /thead tag to append tr element else it wont work on IE and would show none on IE not even any error.

Where as FF and other browsers are happy to show with out any issue.

Thanks alot.

Quote:

Originally Posted by DaveyErwin

more like this,
you needed a tbody
for the table also the
onclick assignment was wrong

<html>
<title> test dom </title>
<head>
<script>
function call(){
alert("cal made");
}
function pictureDiv(){
var mainTable = document.createElement("table");
var tbody = document.createElement("tbody");////////////////
var tbody1 = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
td["valign"] = "bottom";
tr.appendChild(td);
　
　
var picDiv = document.createElement("div");
picDiv["id"] = "x";
picDiv.style.cssText = "width:180px";
var table = document.createElement("table");
table["border"] = "1";
table["valign"] = "bottom";
table["cellpadding"] = "0";
table["cellspacing"] = "0";
table.style.cssText = "padding-bottom:10";
picDiv.appendChild(table);
var tr1 = document.createElement("tr");
var td1 = document.createElement("td");
table.appendChild(tbody1);/////////////////////////////
tbody1.appendChild(tr1);/////////////////////////////
tr1.appendChild(td1);
var img = document.createElement("img");
img["id"] = "y";
img["src"] ="x.gif";
td1.appendChild(img);
var td2 = document.createElement("td");
td2["valign"] = "bottom";
tr1.appendChild(td2);
var resDiv = document.createElement("div");
resDiv["id"] = "resolutionwarning";
resDiv.style.cssText = "margin-left: 5px;";
td2.appendChild(resDiv);
var atag = document.createElement("a");
atag["href"] ="";
atag["onclick"] = call;///////////////////////////////////////
resDiv.appendChild(atag);
var resImg = document.createElement("img");
resImg["id"] = "z";
resImg["src"] = "y.gif";
resImg["width"] = "9";
resImg["height"] = "9";
resImg["border"] = "0";
resImg["align"] = "absbottom";
resImg["alt"] = " not recommended ";
atag.appendChild(resImg);
var tr2 = document.createElement("tr");
var td3 = document.createElement("td");
tr2.appendChild(td3);
var text = document.createTextNode('4x6');
td3.appendChild(text);
picDiv.appendChild(tr2);
td.appendChild(picDiv);
mainTable.appendChild(tbody);
tbody.appendChild(tr);
document.getElementById("previews").appendChild(mainTable);
}
</script>
</head>
<bodyonload="pictureDiv()">
Test page....
<divid="previews"></div>
</body>
</html>

DaveyErwin · 01-01-2013, 06:05 PM

this works for me ?

Code:

 
<!doctype html>
<html>
<title> test dom </title>
<head>
<script>
function call(){
alert("call made");
}
function pictureDiv(){
var mainTable = document.createElement("table");
var tbody = document.createElement("tbody");
var tbody1 = document.createElement("tbody");///////////////
var tr = document.createElement("tr");
var td = document.createElement("td");
td["valign"] = "bottom";
tr.appendChild(td);
var picDiv = document.createElement("div");
picDiv["id"] = "x";
picDiv.style.cssText = "width:180px";
var table = document.createElement("table");
table["border"] = "1";
table["valign"] = "bottom";
table["cellpadding"] = "0";
table["cellspacing"] = "0";
table.style.cssText = "padding-bottom:10";
picDiv.appendChild(table); 
var tr1 = document.createElement("tr");
var td1 = document.createElement("td");
//////table.appendChild(tr1);
table.appendChild(tbody1);//////////////
tbody1.appendChild(tr1);///////////////
tr1.appendChild(td1);
var img = document.createElement("img");
img["id"] = "y";
img["src"] ="x.gif";
td1.appendChild(img);
var td2 = document.createElement("td");
td2["valign"] = "bottom";
tr1.appendChild(td2);
var resDiv = document.createElement("div");
resDiv["id"] = "resolutionwarning";
resDiv.style.cssText = "margin-left: 5px;";
td2.appendChild(resDiv);
var atag = document.createElement("a");
atag["href"] ="";
atag["onclick"] = call;//////////////////////////
resDiv.appendChild(atag); 
var resImg = document.createElement("img");
resImg["id"] = "z";
resImg["src"] = "y.gif";
resImg["width"] = "9";
resImg["height"] = "9";
resImg["border"] = "0";
resImg["align"] = "absbottom";
resImg["alt"] = " not recommended ";
atag.appendChild(resImg);
var tr3 = document.createElement("tr");///////////////////
var td3 = document.createElement("td");
tr3.appendChild(td3);////////////////////////
var text = document.createTextNode('4x6');
td3.appendChild(text);
picDiv.appendChild(tr3);////////////////////////
td.appendChild(picDiv);
mainTable.appendChild(tbody);
tbody.appendChild(tr);
document.getElementById("previews").appendChild(mainTable);
}
</script>
</head>
<body onload = "pictureDiv()">
Test page....
<div id = "previews"></div>
</body>
</html>

Old Pedant · 01-02-2013, 02:26 AM

Depends on version of IE. Yes, IE7 (and I think IE8) require that you append to the <tbody>.

But you know, if you would JUST LISTEN to Felgall and me you would learn that using createElement() and appendChild() for <tr> and <td> are *NOT RECOMMENDED*!!!!

Using insertRow() and insertCell() will:
(a) Be easier to code.
(b) Work in all browsers (yes, without needed to use the <tbody>).
(c) Execute just a bit faster.

WHY would you WANT to continue to use appendChild() for <tr> and <td>????

KScript · 01-02-2013, 10:20 AM

Thanks Old Pedant, sure would next, hopefully new questions for you then

, new to JS .... so learning take bit time....

Quote:

Originally Posted by Old Pedant

Depends on version of IE. Yes, IE7 (and I think IE8) require that you append to the <tbody>.

But you know, if you would JUST LISTEN to Felgall and me you would learn that using createElement() and appendChild() for <tr> and <td> are *NOT RECOMMENDED*!!!!

Using insertRow() and insertCell() will:
(a) Be easier to code.
(b) Work in all browsers (yes, without needed to use the <tbody>).
(c) Execute just a bit faster.

WHY would you WANT to continue to use appendChild() for <tr> and <td>????

felgall · 01-02-2013, 07:34 PM

Quote:

Originally Posted by Old Pedant

WHY would you WANT to continue to use appendChild() for <tr> and <td>????

I suppose if someone wanted a 2% increase in the code speed for Firefox and didn't care that it slows IE, Chrome and Safari down by 10% and Opera is slowed by 500% and that the code is much longer and harder to read then that someone would use appendChild for those calls instead of the table specific commands that are slightly faster in IE, Chrome and Safari and much faster in Opera as well as resulting in shorter easier to read code..

Of course you need to be creating a million tables for the speed difference to be measurable in fractions of a second so the ease of maintaining the code using insertRow and insertCell ought to be the main reason for using them with the fact that they are faster in all but one browser being a bonus.