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

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

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>

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

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/

计算动态html表的总数和小计

2 个答案: