JavaScript 将数据动态填充到 HTML 表中

Question

我正在尝试用数据动态填充表格单元格。我关注了这个JSfiddle example。

这是我的代码：

var heading = new Array();
        heading[0] = "Type"
        heading[1] = "Item Name"
        heading[2] = "Brand"
        heading[3] = "Unit Price"
        heading[4] = "Quantity"

        var stock = new Array();
        for(var i = 0; i < topProductList.length; i++){
            stock[0].push(topProductList[i].type);
            stock[1].push(topProductList[i].itemName);
            stock[2].push(topProductList[i].brand);
            stock[3].push(topProductList[i].unitprice);
            stock[4].push(topProductList[i].quantity);

            console.log(topProductList[i].type + ' ' + topProductList[i].itemName + ' ' + topProductList[i].brand + ' ' + topProductList[i].unitprice + ' ' + topProductList[i].quantity);
        }

我尝试通过循环遍历我的数组来为每一列添加数据。但是，我收到了Cannot read property 'push' of undefined。我打印出console.log 来检查我是否正确检索并且数据检索没有问题。只是我尝试将每个数据添加到列中的部分遇到了问题。

有什么想法吗？

topProductList 的示例数据：

var topProductList = [{type: 'home appliance', name: 'Sound Teoh Tv Cable 5m Hl3599 Soundteoh', unitprice: 9.90, quantity: 5},
{type: 'kitchen appliance', name: ' Powerpac Mini Rice Cooker Pprc09 Powerpac', unitprice: 19.90, quantity: 5},
{type: 'kitchen appliance', name: ' Sona 2-slice Bread Toaster Sto2201 Sona', unitprice: 39.90, quantity: 5},
{type: 'home appliance', name: ' Simply Living. 10" Wall Clock Simply Living', unitprice: 9.90, quantity: 5},
{type: 'kitchen appliance', name: ' Morries Pie Maker Ms-8028pm Morries', unitprice: 29.90, quantity: 4}];

Answer 1

给你http://jsfiddle.net/4pEJB/488/

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] = "Type"
    heading[1] = "Item Name"
    heading[2] = "Unit Price"
    heading[3] = "Quantity"


    var stock = new Array()
    var topProductList = [{type: 'home appliance', name: 'Sound Teoh Tv Cable 5m Hl3599 Soundteoh', unitprice: 9.90, quantity: 5},
{type: 'kitchen appliance', name: ' Powerpac Mini Rice Cooker Pprc09 Powerpac', unitprice: 19.90, quantity: 5},
{type: 'kitchen appliance', name: ' Sona 2-slice Bread Toaster Sto2201 Sona', unitprice: 39.90, quantity: 5},
{type: 'home appliance', name: ' Simply Living. 10" Wall Clock Simply Living', unitprice: 9.90, quantity: 5},
{type: 'kitchen appliance', name: ' Morries Pie Maker Ms-8028pm Morries', unitprice: 29.90, quantity: 4}];
    

     for(var i = 0; i < topProductList.length; i++){
        var temp = [];
        temp.push(topProductList[i].type);
        temp.push(topProductList[i].name);
        temp.push(topProductList[i].unitprice);
        temp.push(topProductList[i].quantity);
        stock.push(temp);
     }

    //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
    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);
    }  
    myTableDiv.appendChild(table)
}

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

您需要将一个值（数组）推送到库存 stock.push("abc");

array 的 array 中的 stock 变量。 内部 array 包含列级数据，其中外部 array 是行级数据。 p>

另一种减少代码行数的方法，用下面的代码替换 for 循环。

var keys = Object.keys(topProductList[0]);
 for(var i = 0; i < topProductList.length; i++){
   var temp = [];
   for(var key in keys){
    temp.push(topProductList[i][keys[key]]);
   }
   stock.push(temp);
 }

Answer 2

stock[0] 未定义，您需要像这样初始化数组

var stock = [ [], [], [], [], [], [] ];

Answer 3

您的stock 变量是一个数组，但不是stock[0]；

只是做

stock.push();

或直接在 as- 上的索引上设置该值-

stock[0] = topProductList[i].type;

** 在 cmets 之后编辑 **

看起来您的股票是一个多维数组。在这种情况下，如果您遵循 jsfiddle 示例，请按照 -

stock[0] = new Array(topProductList[i].type);

Answer 4

数组元素没有push。但是，您可以将 push 与数组一起使用。请查看this example。