完成一组值后的新行

New row after a set of value is done

本文关键字：新行 一组      更新时间：2023-09-26

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

[
    "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);
  });

你的方法太复杂了。看看这个简单的例子:

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。

创建一个数组对象并将值压入该对象。

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

现在可以修改该表以添加更多的值。

假设您的数组不断分为四个索引，或者必须在四个索引之后生成一个新行。下面是一个如何分块的示例代码。

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

如果您的数据在确切的字段上是一致的，则将其分成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);

首先生成一个与tableMaker函数兼容的数据对象tableData。然后它只是一个简单的tableMaker(tableData, true)调用问题。true参数指定结果表html字符串将包含对象属性键作为侦听器标记textContent (<th>Property Key</th>)

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;
<div id="myTable"></div>

相关文章：