如何在for循环中形成表格？答案

【问题标题】：How to form table within for loop?如何在for循环中形成表格？
【发布时间】：2016-04-16 01:37:19
【问题描述】：

这是循环的样子：

for(var i=0;i < data.length; i++) {
    new_array.push(data[i].catalog_name,data[i].price);
    for (var j=0;j < new_array.length; j++){
        $("#print_receipt").append("<table><tr><th>Item Name</th><th>Unit Price</th></tr><tr>");
        $.each(new_array[j], function( index, value ) {
            $("#print_receipt").append(value);
            if(index == 1) {
                $("#print_receipt").append("</td></tr>");
            }
        });                         
        $("#print_receipt").append("</td></tr></table>");
    }
}

结果是：

但是想要的输出是：

商品名称                       单价
系统自动下线        100

Karipap Pusing Ayu          8

编辑：

 for(var i=0;i < data.length; i++)
                     {

                        new_array.push(data[i].catalog_name,data[i].price);
                        $("#print_receipt").append("<table><thead><tr><th>Item name</th><th>Unit Price</th></tr></thead><tbody><tr><td>");
                        for (var j=0;j < new_array.length; j++){


                            $.each(new_array[j], function( index, value ) {
                        $("#print_receipt").append("<table><tr><td>");
                          $("#print_receipt").append(value+"</td></tr></table>");
                          if(index == 1)
                          {
                              $("#print_receipt").append("</td></tr></tbody></table>");
                          }
                        });                         

                         }

       }

【问题讨论】：

您将所有内容附加到同一个元素，而不是创建TABLE/[TBODY]/TR/TD 层次结构。您需要继续追加到表格的适当元素。
您需要了解append() 的工作原理。
@TrueBlueAussie，请看我编辑过的帖子，我仍然无法正确处理内容
为你做一个例子（除非有人打败我）:)
Answer added: 我不确定我是否从显示的代码中理解了您的数据。似乎每个表应该有多行。您也可以提供数据样本吗？

标签： jquery arrays html-table

【解决方案1】：

您正在编写代码，就像 append 接受字符串并简单地附加它们一样。

您想为需要添加到的树的部分创建 DOM 元素。像这样的东西（未测试）：

for (var i = 0; i < data.length; i++) {
  new_array.push(data[i].catalog_name, data[i].price);
  for (var j = 0; j < new_array.length; j++) {
    var $table = $("<table><tr><th>Item Name</th><th>Unit Price</th></tr><tr>");
    $("#print_receipt").append($table);
    var $row = $('tr').appendTo($table);
    $.each(new_array[j], function(index, value) {
      $row.append($('td').html(value));
    });
  }
}

【讨论】：

注意：该问题所暗示的数据似乎缺少多行，因此请等待示例数据完成此操作:)
new_array.push(data[i].catalog_name, data[i].price);包含所有数据，其中每个项目代表表中的一列，也是一个数组。这样第二个循环 $.each 就会循环通过这个数组来获得每列多行'
@Keren：那么剩下的唯一问题是：您是否打算每行添加一个带有标题的表格？如果不在第二个 for 循环之前将其向上移动。

【解决方案2】：

 $(document).ready(function () {

    data = [["Sistem Autodownline", 100], ["Karipap Pusing Ayu", 8]];

    szData="<table><thead><tr><th>Item name</th><th>Unit Price</th></tr></thead><tbody>";

    for (i = 0; i < data.length; i++)
    {
        szData  =  szData   +    "<tr>";
        for (j = 0; j < data.length; j++)
            {
            szData  =  szData   +  "<td>" + data[i][j] +  "</td>";  
            }
        szData  =  szData   +    "</tr>";
    }

    $("#print_receipt").html(szData)
});

【讨论】：