动态生成的表格——使用数组填充TD值答案

【问题标题】：Dynamically generated table - using an array to fill in TD values动态生成的表格——使用数组填充TD值
【发布时间】：2013-12-05 18:26:50
【问题描述】：

我需要你的帮助，

由于某种原因，我无法将数组中捕获的数据填充到动态生成表的 TD 单元格中：

<!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>

【问题讨论】：

检查您的控制台。你有 JS 错误。
注意：您永远不需要在事件处理程序中指定“javascript:”。

标签： javascript dom

【解决方案1】：

变化：

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)
    }
}

到这里：

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);
}

Fiddle

【讨论】：