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

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>

您需要按一個值（數組）去通過在array的array stock.push("abc");

你stock變量的股票。 內array包含列級數據，其中作爲外array是行級數據。

另一種減少代碼行數的方法是用下面的代碼替換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 4

stock[0]未定義你需要初始化數組一樣的topProductList這

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