Question

我有一个包含这些值的数组：

[
    "Prod1",
    "Puma Superstar",
    "1",
    "$50",
    "Prod2",
    "Nike Superstar",
    "2",
    "$100"
]

有可能这样做吗？

Product ID   |   Product Name   | Qty | Price
-------------|------------------|-----|------
   Prod1     |   Puma Superstar |  1  | $50
   Prod2     |   Nike Superstar |  2  | $100

我的代码显示了我试图做的事情。但是，由于rows.length始终为0（未刷新），我无法将项目添加到新行中。有办法还是不可能？

  db.allDocs({
    include_docs: true,
    attachments: true,
    startkey: 'receipt',
    endkey: 'receipt\uffff'
  }).then(function(result) {
    console.log(result);
    console.log(result.rows.length);
    for (var i = 0; i <= (result.rows.length - 1); i++) {
      if (result.rows[i].doc.nric == "alvin123") {
        var tableRef = document.getElementById("tableA").getElementsByTagName("tbody")[0];

        var newRow = tableRef.insertRow(tableRef.rows.length);

        var newCell = newRow.insertCell(0);
        var anotherCell = newRow.insertCell(1);

        newCell.onclick = function() {

          var id = this.innerHTML;

          alert(id);

          db.get(id).then(function(doc) {

            var tableRef1 = document.getElementById("tableC").getElementsByTagName("tbody")[0];

            var tableLength = tableRef1.rows.length;

            var newRow1 = tableRef1.insertRow(tableLength);

            var newCell1 = newRow1.insertCell(0);
            var anotherCell1 = newRow1.insertCell(1);
            var newCell2 = newRow1.insertCell(2);
            var anotherCell3 = newRow1.insertCell(3);


            for (var j = 0; j < doc.items[0].length; j++) {

              if (doc.items[0][j].charAt(0) == 'P') {
                newCell1.appendChild(document.createTextNode(doc.items[0][j]));

              } else if (doc.items[0][j].charAt(0) == '$') {
                anotherCell3.appendChild(document.createTextNode(doc.items[0][j]));
                tableLength = tableLength + 1;
              } else if (isNaN(doc.items[0][j].charAt(0)) == false) {
                newCell2.appendChild(document.createTextNode(doc.items[0][j]));
              } else {
                anotherCell1.appendChild(document.createTextNode(doc.items[0][j]));
              }
            }

          }).catch(function(err) {
            console.log(err);
          });

        };

        newCell.appendChild(document.createTextNode(result.rows[i].doc._id));
        anotherCell.appendChild(document.createTextNode("$" + result.rows[i].doc.totalAmount));
      }
    }
  }).catch(function(err) {
    console.log(err);
  });

Answer 1

你的方法很复杂。看看这个简单的例子：

var tableRef1 = document.getElementById("tableC").getElementsByTagName("tbody")[0];

var items = [
  "Prod1",
  "Puma Superstar",
  "1",
  "$50",
  "Prod2",
  "Nike Superstar",
  "2",
  "$100"
]

for (var j = 0; j < items.length; j+=4) {

  var tableLength = tableRef1.rows.length;
  var newRow = tableRef1.insertRow(tableLength);
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  var cell4 = newRow.insertCell(3);

  cell1.appendChild(document.createTextNode(items[j]));
  cell2.appendChild(document.createTextNode(items[j+1]));
  cell3.appendChild(document.createTextNode(items[j+2]));
  cell4.appendChild(document.createTextNode(items[j+3]));
}

请注意：

您需要在表内部循环
您不必检查当前值的第一个字符。你知道他们总是在同一个顺序 - 只需要接下来的四个项目。这就是我的循环计数器增加4的原因。

请参阅jsfiddle上的此工作示例。

Answer 2

创建一个数组对象并将值推送到该对象中。

var tableRef1 = []
 tableRef1.push(document.getElementById("tableC").getElementsByTagName("tbody")[0])

`

现在可以修改此tableRef以添加更多值。

Answer 3

如果您的数据在确切字段中保持一致，请将其缩小为4，然后继续将其插入您的行中：

var prod = [
              "Prod1",
              "Puma Superstar",
              "1",
              "$50",
              "Prod2",
              "Nike Superstar",
              "2",
              "$100"
]

function chunk(arr, size){
  var chunkedArr = [];
  var noOfChunks = Math.ceil(arr.length/size);
  console.log(noOfChunks);
  for(var i=0; i<noOfChunks; i++){
    chunkedArr.push(arr.slice(i*size, (i+1)*size));
  }
   return chunkedArr;
}

var chunkedArr = chunk(prod, 4);
console.log(chunkedArr);

Answer 4

鉴于您的数组不断分成四个索引，或者每四个索引后必须生成一个新行。下面是如何对其进行分块的示例代码。

＆＃13;

var arr_ = [
    "Prod1",
    "Puma Superstar",
    "1",
    "$50",
    "Prod2",
    "Nike Superstar",
    "2",
    "$100"
];
var ctr = 0;
var arr_obj = [];
for(var x=0; x<(arr_.length/4); x++){
  arr_obj.push({
    'Product ID' : arr_[ctr + 0],
    'Product Name' : arr_[ctr + 1],
    'Qty' : arr_[ctr + 2], 
    'Price' : arr_[ctr + 3]
  }); 
  ctr += x+4;  
}
console.log(arr_obj);

＆＃13;

Answer 5

让我们首先生成一个名为tableData的数据对象，它与tableMaker函数兼容。然后，这只是一个简单的tableMaker(tableData, true)电话问题。 true参数指定结果表html字符串将包含对象属性键作为听众标记textContent（<th>Property Key</th>）

＆＃13;

function tableMaker(o,h){
  var keys = Object.keys(o[0]),
  rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                  : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
      rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
  return "<table>" + rows + "</table>";
}

var  data = ["Prod1", "Puma Superstar", "1", "$50",
             "Prod2", "Nike Superstar", "2", "$100"],
tableData = data.reduce((p,c,i,a) => i%4 === 0 ? p.concat({"Product ID":c, "Product Name":a[++i], "Quantity":a[++i], "Price":a[++i]})
                                               : p,[]),
tableHTML = tableMaker(tableData,true);
myTable.innerHTML = tableHTML;

＆＃13;

<div id="myTable"></div>

＆＃13;

完成一组值后的新行

5 个答案: