Расчет итоговых и промежуточных итогов динамической HTML-таблицы

Question

Я хотел бы иметь возможность рассчитать как итоговую сумму, так и промежуточный итог моей таблицы. промежуточный итог состоит из строк, выбранных пользователем, где в качестве итогового значения используется только сумма всего столбца цены.

Main.js

function showTable(data) {
 var tbl = document.getElementById("food_table")
 var table_data ='';
 for (i=0; i< data.length; i++){
   table_data += '<tr class="contentRow">';
   table_data += '<td>'+data[i].pk +'</td>';
   table_data += '<td>'+data[i].Description+'</td>';
   table_data += '<td class="price">'+ 'R<span>' + data[i].Price + '</span></td>';
   table_data += '</tr>';
 }
 tbl.insertAdjacentHTML('afterbegin', table_data);
 tbl.insertAdjacentHTML('beforeend', '<tr>Total Bill = R<span id="total">' + total 
 +'</tr>' );
 tbl.insertAdjacentHTML('beforeend', '<tr>SubTotal = R<span id="subTotal">' + subTotal 
 +'</span></tr>' );

 }


 $(function() {
  var total = 0;
  $(function() {
     $(".contentRow").each(function() {
     total += +$(this).find(".price>span").text();
     });
    $("#total").text(total.toFixed(2))
  });

  $("#food_table").on('click','.contentRow',function() {
    $(this).toggleClass("highlight");
    var subTotal = 0;
    $(".highlight").each(function() {
       subTotal += +$(this).find(".price>span").text();
    });
   $("#subTotal").text(subTotal.toFixed(2))
  });
showTable(data);
});

Мои данные

[
{
    "pk": 1,
    "Description": "Pizza",
    "Price": "50.00"
},
{
    "pk": 2,
    "Description": "Hamburger",
    "Price": "60.00"
},
{
    "pk": 3,
    "Description": "Coca Cola",
    "Price": "20.00"
},
{
    "pk": 4,
    "Description": "Fanta",
    "Price": "20.00"
},
{
    "pk": 5,
    "Description": "Corona",
    "Price": "30.00"
},
{
    "pk": 6,
    "Description": "Steak",
    "Price": "100.00"
}
]

Это данные, которые я использовал, это объект JSON, который сериализован в моем приложении django.

Answer 1

Вот полное решение с некоторыми примерами данных:

var data=JSON.parse(`[{"pk": 1,"Description": "Pizza","Price": "50.00"},
          {"pk": 2,"Description": "Hamburger","Price": "60.00"},
          {"pk": 3,"Description": "Coca Cola","Price": 20.00},
          {"pk": 4,"Description": "Fanta","Price": 20.00},
          {"pk": 5,"Description": "Corona","Price": 30.00},
          {"pk": 6,"Description": "Steak","Price": 100.00}]`);;

function doSum(s){return [...$(s)] // sums up over all DOM elements of $(s)
  .reduce((sum,p)=>sum+(+p.innerText), 0).toFixed(2)
}
function showTable(data) {
 $("#food_table tbody").html('<tr class="contentRow">'
  +data.map(v=>'<td>'+v.pk+'</td><td>'
    +v.Description+'</td><td class="price">R<span>'
    +v.Price+'</span></td></tr>' ).join('')); 
}
showTable(data);

$('#total').text(doSum(".price>span"))

$("#food_table tbody").on('click','tr',function() {
  $(this).toggleClass("highlight");
  $('#subtotal').text(doSum(".highlight .price>span"))
});

.highlight {background-color: yellow}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="food_table"><thead>
<tr><th>Id</th><th>description</th><th>price</th></tr></thead>
<tbody></tbody>
</table><br>


subtotal: R<span id="subtotal"></span><br>
total: R<span id="total"></span>

Используя адекватные селекторы, вы можете обойтись без множества ваших идентификаторов и классов.

Answer 2

Все, что вам нужно сделать, это добавить переменную total в ваш цикл for:

var table_data ='';
var total = 0;
for (i=0; i< data.length; i++){
  table_data += '<tr class="contentRow">';
  table_data += '<td>'+data[i].pk +'</td>';
  table_data += '<td>'+data[i].Description+'</td>';
  table_data += '<td class="price">'+ 'R<span>' + data[i].Price + '</span></td>';
  table_data += '</tr>';
  total += parseFloat(data[i].Price);
}

Вы, кажется, уже сделали это в своем jquery для промежуточного итога, поэтому, пожалуйста, укажите, если это не такработает.

РЕДАКТИРОВАТЬ: см. этот JSFiddle, он использует parseFloat: https://jsfiddle.net/5vbj4L1r/7/