Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question 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.....

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    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

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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.
    Last edited by DaveyErwin; 12-31-2012 at 01:17 PM.

  • Users who have thanked DaveyErwin for this post:

    KScript (01-01-2013)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry 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.
    Last edited by KScript; 01-01-2013 at 03:11 PM.

  • #7
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry 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]

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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>

  • #9
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile 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 View Post
    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>

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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>
    Last edited by DaveyErwin; 01-01-2013 at 06:23 PM.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    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>????
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up 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 View Post
    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>????

  • #13
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •