Dynamically generated table - using an array to fill in TD values

Question

I need your help,

For some reason, I can't get the data captured in my array to populate into the TD cells of my dynamically generated table:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function addTable() {

            var myTableDiv = document.getElementById("metric_results")
            var table = document.createElement('TABLE')
            var tableBody = document.createElement('TBODY')

            table.border = '1'
            table.appendChild(tableBody);

            var heading = new Array();
            heading[0] = "Request Type"
            heading[1] = "Group A"
            heading[2] = "Groub B"
            heading[3] = "Group C"
            heading[4] = "Total"

            var stock = new Array()
            stock[0] = new Array("Cars", "88.625", "85.50", "85.81", "987")
            stock[1] = new Array("Veggies", "88.625", "85.50", "85.81", "988")
            stock[2] = new Array("Colors", "88.625", "85.50", "85.81", "989")
            stock[3] = new Array("Numbers", "88.625", "85.50", "85.81", "990")
            stock[4] = new Array("Requests", "88.625", "85.50", "85.81", "991")

            //TABLE COLUMNS
            var tr = document.createElement('TR');
            tableBody.appendChild(tr);
            for (i = 0; i < heading.length; i++) {
                var th = document.createElement('TH')
                th.width = '75';
                th.appendChild(document.createTextNode(heading[i]));
                tr.appendChild(th);

            }

            //TABLE ROWS
            var tr = document.createElement('TR');
            tableBody.appendChild(tr);

            for (i = 0; i < stock.length; i++) {
                for (j = 0; j < stock[i].length; j++) {
                    var td = document.createElement('TD')
                    td.appendChild(document.createTextNode(stock[i][j]));
                    td.appendChild(td)
                }
            }

            myTableDiv.appendChild(table)

        }
    </script>
</head>

<div id="metric_results">
    <input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
</div>

</body>
</html>

Note: you never need to specify "javascript:" in an event handler. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Dec 5, 2013 at 18:28

Sergio · Accepted Answer · 2013-12-05 18:40:14Z

Change:

var tr = document.createElement('TR'); // this should be inside the first loop
tableBody.appendChild(tr); // this should be just before the first loop is over

for (i=0; i<stock.length; i++) {
    for (j=0; j<stock[i].length; j++)    {
      var td = document.createElement('TD')
      td.appendChild(document.createTextNode(stock[i][j]));
      td.appendChild(td) // this should be tr.appendChild(td)
    }
}

to this:

for (i = 0; i < stock.length; i++) {
    var tr = document.createElement('TR');
    for (j = 0; j < stock[i].length; j++) {
        var td = document.createElement('TD')
        td.appendChild(document.createTextNode(stock[i][j]));
        tr.appendChild(td)
    }
    tableBody.appendChild(tr);
}

Collectives™ on Stack Overflow

Dynamically generated table - using an array to fill in TD values

1 Answer 1

Fiddle

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related