javascript - 如何在此 html 表中添加带有动态表值的行跨度？

Question

我有一个 AJAX，将 tr 附加到表中。附加到表中的 tr 数量根据返回的数据而变化。这是我的 AJAX:

success  : function(data)
{
   var tableData,t1,t2,t3,t4,t5,t6,t7;
   var no       = 1;

   $.each(data.result_brg, function(index, rows_minta) {
      t1    = "<tr><td><font size='1'>"+ no++ +"</font></td>";
      t2    =     "<td align='left'><font size='1'>"+ rows_minta.NamaOutlet +"</font></td>";
      t3    =     "<td class='barang' style='text-align:left; vertical-align:middle'>"+ rows_minta.NamaBarang +"</td>";
      t4    =     "<td class='j_minta' style='text-align:right; vertical-align:middle'>"+ rows_minta.jumlah_minta +"</td>";
      t5    =     "<td></td>";
      t6    =     "<td class='satuan' style='text-align:left; vertical-align:middle'>"+ rows_minta.Satuan +"</td>";
      t7    =     "<td></td></tr>";

      tableData += t1+t2+t3+t4+t5+t6+t7;

      $('#tbl_content tbody tr').remove();
      $('#tbl_content tbody').append(tableData);
   });

这是显示的表格:

No     outlet     item      stock     type       unit          invoice_no
1      outlet A   Book         45                
2      outlet A   Pen          24                
3      outlet A   Pencil       87
4      outlet A   Ruler        96
5      outlet B   Bag          57
6      outlet B   Shirt        32
7      outlet C   SSD          64

我正在寻找的表:

No     outlet     item      stock     type       unit          invoice_no
1                 Book         45                
2                 Pen          24  
       outlet A              
3                 Pencil       87
4                 Ruler        96
5                 Bag          57
       outlet B
6                 Shirt        32
7      outlet C   SSD          64

注意:第一列应居中(valign=middle 和 text_align=center)

Answer 1

我更改了答案，在数组上使用过滤器来计算有多少 socket 与当前 socket 匹配。该值在行中设置。该代码未经测试，但我认为它会接近您想要的。

    success  : function(data)
    {

        var no       = 1;
        var $tbody = $('#tbl_content tbody');
        // clear table
        $tbody.empty();
        var last = "";

        $.each(data.result_brg, function(index, rows_minta) {
            // create new row
            var $row  = $("<tr></tr>");

            // append the number td
            $row.append("<td><font size='1'>"+ no++ +"</font></td>");

            // append the outlet td if appropriate
            if(last != rows_minta.NamaOutlet){
                // use array filter on the dataset to count rows for rowspan
                var len = data.result_brg.filter(function(cur){return cur == rows_minta.NamaOutlet}).length;
                // append the ted
                $row.append(  "<td align='left' rowspan='"+len+"'><font size='1'>"+ rows_minta.NamaOutlet +"</font></td>");
                // set up for next time
                last = rows_minta.NamaOutlet;
            }
            // append the rest of the td
            $row.append("<td class='barang' style='text-align:left; vertical-align:middle'>"+ rows_minta.NamaBarang +"</td>");
            $row.append("<td class='j_minta' style='text-align:right; vertical-align:middle'>"+ rows_minta.jumlah_minta +"</td>)";
            $row.append("<td></td>");
            $row.append("<td class='satuan' style='text-align:left; vertical-align:middle'>"+ rows_minta.Satuan +"</td>");
            $("<td></td>");
            // append the row to the body
            $tbody.append($row);
        });
    }