показать сумму элементов между строками в динамических строках - PullRequest
0 голосов
/ 10 сентября 2018

Я генерирую динамические строки из данных 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>';

});

это дает мне вывод, как

enter image description here

Теперь я хочу отобразить сумму каждого типа категории в последней строке каждой строки элемента, как enter image description here

но не понимаю.

я пытаюсь реализовать логику после добавления, как

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

//  show sum group by category
});

Я ищу в форуме. но каждое предложение должно отображаться в последних строках. Как я могу генерировать в середине строки? Пожалуйста, предложите

1 Ответ

0 голосов
/ 10 сентября 2018

Предполагая, что данные 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/>
...