如何在此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

注意：第一列應centered （valign = middle和text_align = center）

Answer 1

我更改了答案，在陣列上使用過濾器來計算與當前插座匹配的插座數量。 該值在行中設置。 該代碼未經測試，但我認為它將接近您想要的。

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