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

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

只是做

stock.push();

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

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

**评论后编辑**

看起来你的股票是一个多维数组。在这种情况下，如果您跟随jsfiddle示例，只需执行 -

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

Answer 2

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

Answer 3

您可以使用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");

stock array array中的array变量。内部 array包含列级数据，其中外部 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); } 行级数据

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

flatMap

Answer 4

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

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

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

4 个答案: