新しい行が

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つの項目を取るだけです。だから私のループカウンタは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

あなたの配列が常にあることを考えます4つのインデックスに分割するか、または4つのインデックスごとに新しい行を生成する必要があります。以下は、それをチャンクする方法のサンプルコードです。

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

Answer 5

最初に、というデータオブジェクトを生成します。これはtableMaker関数と互換性があります。それは単純な問題のちょうどtableMaker(tableData, true)呼び出しです。 true引数には、結果表のHTML文字列がhearderタグ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>