显示动态行中行之间的项目总和

Question

我正在使用此代码从json数据生成动态行。

rowtemplate='';

$.each(jsonData, function(key, value){

rowtemplate=rowtemplate+'<tr>';
$.each(value, function(key1, value1){

objReportsInterface.rowtemplate=rowtemplate+'<td><center>'+value1+'</center></td>';

});

rowtemplate=rowtemplate+'</tr>';

});

这给了我类似

的输出

现在我想在每个项目行的最后一行中显示每种类别的总和，例如

但没有任何想法。

我试图在像

这样的追加之后实现逻辑

$('.tabletbody tr').each(function(){

//  show sum group by category
});

我在论坛中搜索。但每条建议都显示在最后一行。我如何在行中间生成？请建议

Answer 1

假设json数据已按Item排序，则可以使用变量检查项目更改并输出摘要行

var jsonData = [{
  Qty: 3,
  Time: '04:00',
  Item: 'Avacado Stuffed Tomato',
  functionRoom: 'Living Room'
},
{
  Qty: 3,
  Time: '04:00',
  Item: 'Avacado Stuffed Tomato',
  functionRoom: 'Living Room'
},
{
  Qty: 1,
  Time: '04:00',
  Item: 'BBQ Dry Ruby Steak Skewer',
  functionRoom: 'Living Room'
},
{
  Qty: 1,
  Time: '04:00',
  Item: 'BBQ Dry Ruby Steak Skewer',
  functionRoom: 'Living Room'
}]

rowtemplate = '';
var sum = 0
var currentItem;

// Ensure that json data is grouped by Item

$.each(jsonData, function(key, value) {

  if(currentItem !== value.Item) {
    if (currentItem) {
       rowtemplate += '<tr><td>'+sum+'</td><td></td><td>Sum of '+currentItem+'</td></tr>'
    }
    currentItem = value.Item
    sum = 0
  }
  sum += Number(value.Qty)

  rowtemplate = rowtemplate + '<tr>';
  $.each(value, function(key1, value1) {
    
    rowtemplate += '<td><center>' + value1 + '</center></td>';
    
  });

  rowtemplate = rowtemplate + '</tr>';

});
rowtemplate += '<tr><td>'+sum+'</td><td></td><td>Sum of '+currentItem+'</td></tr>'

document.body.querySelector('table').innerHTML += rowtemplate

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table/>