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 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2013
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Post Table cells does not display any value

    I am having a little trouble in getting my table displayed. What I am trying to do here is to create a row using one of my existing table and 5 cells with their separate values using arrays(Since I have done my research and found out that using arrays is better than concatenating variables with string) dynamically with the for loop. For some reason, after I execute my script, the table just doesn't come out.

    My question is, is it totally possible if I do it using this method, or is there any better methods out there I can use???

    Here is my javascript script
    Code:
    function TableCreate()
    {
        var table=document.getElementById("comparetable");
                var row = document.createElement("tr");
                var body = document.createElement("tbody");
                var celltext = new Array();
                var celltext[0] = document.createTextNode("A");
                var celltext[1] = document.createTextNode("B");
                var celltext[2] = document.createTextNode("Cl");
                var celltext[3] = document.createTextNode("D");
                var celltext[4] = document.createTextNode("E");
                var celltext[5] = document.createTextNode("F");
                for(var i=0; i<6; i++){
                       var cell = document.createElement("td");
                       cell.appendChild(celltext[i]);
                       row.appendChild(cell);
                }
                body.appendChild(row);
                table.appendChild(body);
    }
    This is my html script

    Code:
    <table border="1" id="comparetable">
        
    </table>
    
    <input type="button" value="Generate a table." onclick="TableCreate()">

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Don't use createElement to create <tr> and <td>. Use the builtin table methods.

    Thus:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <table border="1" id="comparetable">
    </table>
    
    <input type="button" value="Generate a table." onclick="TableCreate()">
    
    <script type="text/javascript">
    function TableCreate( )
    {
        var texts = ["A","B","Cl","D","E","F"];
        var table=document.getElementById("comparetable");
        var row = table.insertRow(-1);
        for ( var t = 0; t < texts.length; ++t )
        {
            var td = row.insertCell(-1);
            td.appendChild( document.createTextNode(texts[t]) );
        }
    }
    </script>
    </body>
    </html>
    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.

  • Users who have thanked Old Pedant for this post:

    alucard786 (06-10-2013)

  • #3
    New Coder
    Join Date
    Jun 2013
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi, thanks for your help. It works properly now


  •  

    Posting Permissions

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