Question

这是当前的输出

注意：
1）粉红色围栏部分重复两次 2）粉红色栅栏的值应该分成新的<tr>，但现在它的逗号分隔。

这是执行以上所有操作的脚本：

var new_array = {};
for (var i = 0; i < data.length; i++) {
  new_array[i] = ({
    'catalog_name': data[i].catalog_name,
    'price': data[i].price,
    'qty': data[i].qty,
    'amt': data[i].grand
  });

  var _htlm = "<table><tr><td>"+
      "<h2 class='text-center'>POS</h2>"+
      "Merchant id: " + data[i].mem_id + 
      "<br/>Merchant Name :" + data[i].mem_name + 
      "<br/>Transaction Id :" + data[i].trans_id + 
      "</td></tr><tbody>"

  $("#print_receipt").prepend(_html);
}

var _html2 = "<table><thead><tr>"+
    "<th>Item Name</th>"+
    "<th>Unit Price</th>"+
    "<th>Qty</th><th>Amount</th>"+
    "</thead><tbody>"
$("#print_receipt tbody").append(_html2);

$.each(new_array, function() {
  var _html3 = "<table><tr><td>" + 
      this.catalog_name + "</td><td>" + 
      this.price + "</td><td>" + 
      this.qty + "</td><td>" + 
      this.amt + "</td></tr></tbody></table>";
  $("#print_receipt tbody").append(_html3);
});


for (var j = 0; j < data.length; j++) {
  var _html4 = "</tbody><tfoot><tr>"+
      "<td colspan='3'>TOTAL</td><td>" + data[j].grand + 
      "</td></tr><tr><td colspan='3'>CASH</td><td>" + data[j].cash + 
      "</td></tr><tr><td colspan='3'>CHANGE</td><td>" + data[j].change + 
      "</td></tr></tfoot></table><br/>"+
      "<table><tr><td>Customer Info<br/>Member Id: " + data[j].cust_id + 
      "<br/>Name: " + data[j].cust_name + 
      "<br/><input type='button' id='print_now' "+
      "onClick = 'window.print()' value='PRINT RECEIPT'/>"+
      "</td></tr></table>"
  $("#print_receipt").append(_html4);
}

Answer 1

编辑（我错过了解答这个问题的答案）：您正在创建一个表，然后在表之后创建一个tbody。创建表后，HTML会创建一个tbody，所以会发生什么：
1-你创建表
2-在表格内部，html创建了一个tbody
3-你在桌子后打开一个tbody。这导致具有2个tbody元素。所以jquery发现两者并在每个中插入相同的内容请参阅小提琴中的第46行（您打开tbody的地方，只需删除标签）。

我做了一个小提琴： https://jsfiddle.net/LgtmLtux/2/

var new_array = {};
var data = 
[
  {
        'catalog_name':"Tea", 
        'price':25,
        'qty':8,
        'grand':108
    },
  {
        'catalog_name':"Tea", 
        'price':25,
        'qty':8,
        'grand':108
    },
  {
        'catalog_name':"Tea", 
        'price':25,
        'qty':8,
        'grand':108
    },
  {
        'catalog_name':"Tea", 
        'price':25,
        'qty':8,
        'grand':108
    },
];
for(var i=0;i < data.length; i++)
{
    new_array[i] = 
    { 
        'catalog_name':data[i].catalog_name, 
      'price':data[i].price,
      'qty':data[i].qty,
      'amt':data[i].grand 
     };
     //Creating tables for each element in 'data'
    $("#print_receipt").prepend(
    "<table><tr><td><h2 class='text-center'>POS</h2>Merchant id: "+
    data[i].mem_id+
    "<br/>Merchant Name :"+
    data[i].mem_name+
    "<br/>Transaction Id :"+
    data[i].trans_id+
    "</td></tr><tbody>"
  ); 
}
console.log(new_array);
$("#print_receipt tbody").append( "<table><thead><tr><th>Item Name</th><th>Unit Price</th><th>Qty</th><th>Amount</th></thead><tbody>");

$.each(new_array, function(index, value){

    //Adding elements on each table created
  $("#print_receipt tbody").append(
    "<table><tr><td>"+
    value.catalog_name+
    "</td><td>"+
    value.price+
    "</td><td>"+
    value.qty+
    "</td><td>"+
    value.amt+
    "</td></tr></tbody></table>"
  );
});

for(var j=0;j < data.length; j++)
{
    $("#print_receipt").append(
        "</tbody><tfoot><tr><td colspan='3'>TOTAL</td><td>"+
    data[j].grand+
    "</td></tr><tr><td colspan='3'>CASH</td><td>"+
    data[j].cash+
    "</td></tr><tr><td colspan='3'>CHANGE</td><td>"+
    data[j].change+
    "</td></tr></tfoot></table><br/><table><tr><td>Customer Info<br/>Member Id: "+
    data[j].cust_id+
    "<br/>Name: "+
    data[j].cust_name+
    "<br/><input type='button' id='print_now' onClick = 'window.print()' value='PRINT RECEIPT'/></td></tr></table>");  
}

除此之外：
- 注意你的编码风格，这是难以阅读的。在小提琴中你会看到我如何写它来更容易阅读。

- 不要为非表格信息制作表格（可以说，表格之前和之后的信息是非表格式的（至少不在表格内））

- 只使用一个表，尽量不在表格中创建表格

Answer 2

@Keren用于模板使用模板引擎，如把手。或者其他一些库。这将使您的代码更具可读性，并且可以轻松调试。

避免在jquery.handlebars中进行模板化templats会向任何人显示你想要做的事情。如果你使用jquery进行模板操作会使代码的可读性降低。

并且也不应该在script.script中进行模板操作应该是单独的，模板应该是分开的。这将使您的代码可测试

如何在另一个循环的中间正确循环数组？

2 个答案: