javascript - jQuery中计算行总数和所有行总数

Question

我有发票行，可以通过按按钮添加和删除。现在我想分别计算每行的总金额(公式为(数量 * 单价)* vat_percentage)。 所有行的总和应成为发票的总和。

我有此 RoR 表格:

 <%= f.fields_for :products do |product| %>
 <tbody>
   <tr class="products_tr">
     <td> <%= product.text_field :quantity, class: 'quantity form-control' %> </td>
     <td> <%= product.text_area :description, class: 'form-control' %> </td>
     <td> <%= product.text_field :unitprice, class: 'unitprice form-control' %> </td>
     <td class='total' readonly="readonly"> 100 </td>
     <td> <%= product.select(:vat, [[' 21%', 21, title: '21%'],[' 6%', 6, title: '6%'], [' 0%', 0, title: '0%']], class: 'vat_percentage') %> </td>
     <td class='delete_tr'><a class="delete" title="delete row"><span class="ti-close"></span></a></td>
   </tr>
 <% end %>
 </tbody>

添加行的代码:

 $(document).ready(function() {
    var counter = $('.products_tr').length;
    $('#add_products').click(function() {
      $('.products_tr:last').after('<tr class="products_tr"><td><input class="quantity form-control" type="text" value="" name="invoice[products_attributes]['+counter+'][quantity]"></td>' +
          '<td><textarea class="form-control" name="invoice[products_attributes]['+counter+'][description]"></textarea></td>' +
          '<td><input id="unitprice" class="unitprice form-control" type="text" name="invoice[products_attributes]['+counter+'][unitprice]"></td>' +
          '<td class="total" readonly="readonly"> 100 </td>' +
          '<td><select name="invoice[products_attributes]['+counter+'][btw]"><option title="21%" value="21"> 21%</option> ' +
          '<option title="6%" value="6"> 6%</option><option title="0%" value="0"> 0%</option></select></td>' +
          '<td class="delete_tr"><a class="delete" title="Rij verwijderen"><span class="ti-close"></span></a></td></tr>');
      counter ++;
    });
  });

我有这个代码用于计算行的总计(显示 NaN)

  $(document).ready(function(){
    var total = 0;
    var quantity       =  parseInt($('.quantity').val());
    var unitprice      =  parseFloat($('.unitprice').val());
    var vat_percentage =  parseFloat($('.vat_percentage').val());
    total              =  (quantity * unitprice) * vat_percentage;

    $('.total').closest('.total').text(total);
  });

Answer 1

使用 each 函数通过 products_tr 类检查每个元素。对于每一行，您可以使用 jquery 获取所需的数字并解析或设置它。

var total=0;
$('.products_tr').each(function(){
    var quantity=parseInt($('.quantity',this).text());
    var unit=parseFloat($('.unitprice',this).text());
    var vat=parseFloat($('.vat_percentage',this).text());
    var row=quantity*unit*vat;
    $('.total',this).text(row);
    total+=row;
});