javascript - 如何根据 ajax 成功返回的数据追加一行？

Question

我有一个从数据库中检索数据并将其附加到 html 表的 ajax。但是，我想在特定条件下添加自定义行。这是我的 ajax 成功:

success  : function(response)
            {
                var tableData,t1,t2,t3;                 
                var count       = 0;

                $.each(response.result_pakai, function(index, rows_pakai){

                    //MONTHS
                    var arr_bln = ["", "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];

                    t1  = "<tr><td>"+arr_bln[rows_pakai.month]+"</td>";
                    t2  =     "<td align='center' class='col_thn'>"+rows_pakai.years+"</td>";
                    t3  =     "<td align='right' class='col_data'>xxx</td></tr>";

                    tableData += t1+t2+t3;

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

                    count+=1;
                });
            }

所以，我想要每年的自定义行。这是我当前的 html 表格结果。

Month       year   data
Januari     2016     10
Februari    2016     75
Desember    2016     95
Januari     2017     47
April       2017     68

这是我所期望的:

Month       year   data
Januari     2016     10
Februari    2016     75
Desember    2016     95
     Total          180

Januari     2017     47
April       2017     68
     Total          115

应该在我的 AJAX 中的什么位置插入以下脚本？

<tr><td colspan='2' class='tr_total'>Total</td><td>&nbsp;</td></tr>

Answer 1

就我个人而言，我倾向于首先按年份将它们分组到一个新对象中，该对象可以存储那一年的行数据，并在存储它的同时增加那一年的总数。

然后迭代该新对象以构建表。在每年迭代结束时添加总行数

var arr_bln = ["", "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];

var data = [
{month:1, year: 2016, count: 10},
{month:2, year: 2016 , count:75},
{month:12, year:2016, count: 95},
{month:1, year:2017 , count: 47},
{month:4, year: 2017, count:  68}
];

// create a new object with years as keys
var yrsObj = data.reduce((a,c)=>{
   a[c.year] = (a[c.year] || {rows:[], total:0} );
   a[c.year].total += c.count;
   a[c.year].rows.push(c);
   return a
},{});
//console.log(yrsObj);

$.each(yrsObj, function(year, yObj){
   var dataRows = yObj.rows.map(function(rObj){
      var $row = $('<tr>'),
         $cells =['month', 'year','count'].map(function(key){
            var cellVal = (key === 'month') ? arr_bln[rObj.month] : rObj[key];
            return $('<td>', {text:cellVal})
         });
         $row.append($cells)
      return $row
   });
   var $totalRow = $('<tr>',{ class:"total"});
   $totalRow.append($('<td>',{text:'Total', colspan:2}).css('text-align','center'));    
   $totalRow.append($('<td>',{text:yObj.total}));
   
   dataRows.push($totalRow)
   $('table').append(dataRows)
})

.total{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Month</th>
    <th>Year</th>
    <th>Data</th>
  </tr>
</table>