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

创建一个包含默认标题行的表格（显示1,10,25等的行...）
遍历所有产品
为每一个创建一个新的表格行
为每个组件在该行中创建一个表格单元格并用适当的数据填充

Answer 2

您可以尝试这个我的快速解决方案（如果您希望您可以重构我的代码）：

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";

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尝试我的代码。

此外，您还必须阅读有关javaScript对象here的更多信息。

将javascript数组转换为HTML并附加到表

3 个答案: