CodingForums.com - Internet Explorer won't append table rows using appendChild

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Internet Explorer won't append table rows using appendChild (http://www.codingforums.com/showthread.php?t=285062)

KScript

12-31-2012 11:00 AM

Internet Explorer won't append table rows using appendChild

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 (Post 1303268)

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

IE won't show up on this dom construction.

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

IE won't show up on this dom construction.

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

IE won't show up on this dom construction.

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 (Post 1303416)

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

IE won't append table rows using appendChild

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 (Post 1303494)

felgall

01-02-2013 07:34 PM

Quote:

Originally Posted by Old Pedant (Post 1303494)

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.

All times are GMT +1. The time now is 05:59 AM.