How to add rowspan with dynamic table values in this html table?

Question

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)

Bindrid · Accepted Answer · 2017-04-28 05:14:50Z

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

Actually, I do not want the empty cell is shown. The first column is should be centered

Collectives™ on Stack Overflow

How to add rowspan with dynamic table values in this html table?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related