Alvin Alvin - 3 months ago 13
HTML Question

New row after a set of value is done

I have an array with these values:

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


Is it possible to do it like this?

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


My code snippet is showing what I've tried to do. However, due to the
rows.length
always being at 0 (not refreshed), I can't add items into a new row. Is there a way or it's not possible?



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

Your approach is way to complicated. Look at this simple example:

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

Note that:

  • You need to add rows to your table inside the loop
  • You don't have to check the first character of the current value. You know they are always in the same order - just take the next four items. That's why my loop counter increments by four.

See this working example at jsfiddle.

Comments