转换JavaScript数组HTML和追加到表

Question

我有这个JavaScript /阵列...

var prodPrice = { // quantity prices, lowest no. is min qty 
    "11580294ce6c41e574c7e9efe063bf01": { 
     minqty: 1, 
     name: "Diamond Pillar", 
     imageURL: "", 
     bigImageURL: "", 
     prices: [ 
     {price: 79.96, qty: 1}, 
     {price: 75.96, qty: 10}, 
     {price: 72.16, qty: 25}, 
     {price: 70.36, qty: 50}, 
     {price: 68.60, qty: 100} 
     ] 
    }, 
    "49f398d1cce9093be484eb5afa1c5ed9": { 
     minqty: 1, 
     name: "Diamond Pillar", 
     imageURL: "", 
     bigImageURL: "", 
     prices: [ 
     {price: 119.96, qty: 1}, 
     {price: 113.96, qty: 10}, 
     {price: 108.26, qty: 25}, 
     {price: 105.56, qty: 50}, 
     {price: 102.92, qty: 100} 
     ] 
    } 
} 

我想抓住从上述阵列的价格，要么它们附加到另一个表作为额外行或创建全新的表是这样的...

   1  10  25  50  100 
Diamond Pillar 79.96 75.96 72.16 70.36 68.60 
Diamond Pillar 119.96 113.96 108.26 105.56 102.92 

我希望这是有道理的 - 感谢一如既往的帮助

Answer 1

你可以试试我的快速解决方案（如果你愿意，你可以重构我的代码）：

var keys = Object.keys(prodPrice); 

(function() { 
    var body = document.body, 
     tbl = document.createElement("table"), 
     firstTableRow = tbl.insertRow(0); 
    firstTableRow.insertCell(-1); 
    for (key in keys) { 
     if (undefined !== prodPrice[keys[key]].prices) { 
     var i = 0, 
      tr = tbl.insertRow(1), 
      priceLen = prodPrice[keys[key]].prices.length; 
     tr.insertCell(-1).appendChild(document.createTextNode(prodPrice[keys[key]].name)); 
     if(0 < priceLen) { 
      for (i = 0; i < priceLen; i++) { 
       if(undefined !== prodPrice[keys[key]].prices[i].price) { 
        if (0 == key) { 
        firstTableRow.insertCell(-1).appendChild(document.createTextNode(prodPrice[keys[key]].prices[i].qty)); 
        } 
        tr.insertCell(-1).appendChild(document.createTextNode(prodPrice[keys[key]].prices[i].price)); 
       } 
      } 
     } 
     } 
     body.appendChild(tbl); 
    } 
})(); 

您可以尝试在这里jsfiddle我的代码。

此外，您还必须阅读更多关于javaScript对象here。

Answer 2

• 创建日表È默认标题行（一个表示1，10，25，等等）
• 遍历所有产品
• 为每一个为每个成分的新的表格行
• 创建内的表格单元格排并用适当的数据填充它

Answer 3

你可以试试这个我快速的解决方案（如果你愿意，你可以重构我的代码）：

var keys = Object.keys(prodPrice); 

(function() { 
    var body = document.body, 
     tbl = document.createElement("table"), 
     firstTableRow = tbl.insertRow(0); 
    firstTableRow.insertCell(-1); 
    for (key in keys) { 
     if (undefined !== prodPrice[keys[key]].prices) { 
     var i = 0, 
      tr = tbl.insertRow(1), 
      priceLen = prodPrice[keys[key]].prices.length; 
     tr.insertCell(-1).appendChild(document.createTextNode(prodPrice[keys[key]].name)); 
     if(0 < priceLen) { 
      for (i = 0; i < priceLen; i++) { 
       if(undefined !== prodPrice[keys[key]].prices[i].price) { 
        if (0 == key) { 
        firstTableRow.insertCell(-1).appendChild(document.createTextNode(prodPrice[keys[key]].prices[i].qty)); 
        } 
        tr.insertCell(-1).appendChild(document.createTextNode(prodPrice[keys[key]].prices[i].price)); 
       } 
      } 
     } 
     } 
     body.appendChild(tbl); 
    } 
})(); 

你可以在这里品尝我的代码jsfiddle 如果您想添加样式表：

tbl.style.width = "100%"; 
tbl.style.border = "1px solid black";