计算动态HTML表格的总数和小计 [英] Calculating totals and sub-totals of dynamic html table

问题描述

我希望能够计算表格的总数以及小计.子总计由用户选择的行组成，其中总计仅是整个价格列的总计.

I would like to be able to calculate the total as well as the sub-total of my table. the sub total is made up of rows selected by the user, where as the total is just the total of the entire price column.

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"
}
]

这是我一直在使用的数据，它是在我的django应用程序中序列化的JSON对象.

This is the data that i have been using, it is a JSON object which is serialized in my django app.

推荐答案

以下是一些示例数据的完整解决方案:

Here is a complete solution with some sample data:

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>

通过使用适当的选择器，您可以无需许多ID和类.

By using adequate selectors you can do without many of your IDs and classes.

这篇关于计算动态HTML表格的总数和小计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！