doucheng2053
doucheng2053
2017-04-28 03:19

如何在此html表中添加带有动态表值的rowspan?

I have an AJAX that append tr to a table. The number of tr appended to the table is varies depend on the data returned. This is my 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);
   });

This is the table displayed:

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

The Table I'm looking for:

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

Note: The first column is should be centered (valign=middle and text_align=center)

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dougong1031 dougong1031 4年前

    I changed the answer to use a filter on the array to count how many outlet match the current outlet. That value is set in the row. This code is untested but I think it will be close to what you want.

        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);
            });
        }
    
    点赞 评论 复制链接分享

相关推荐