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

我尝试通过循环数组来添加每列的数据。但是，我收到无法读取未定义的属性“push”。我打印了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

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

就这么做

stock.push();

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

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

** 评论后编辑 **

看起来你的股票是一个多维数组。在这种情况下，如果您按照 jsfiddle 示例进行操作，只需执行以下操作:

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