计算 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;
});

Answer 2

只是一个真正的快速，这可能会有所帮助

 $(document).ready(function(){
     var total = 0,rowtotal=0;;
       $('.products_tr').each(function(){  
        var quantity       =  parseInt($(this).find('.quantity').val());
        var unitprice      =  parseFloat($(this).find('.unitprice').val());
        var vat_percentage =  parseFloat($(this).find('.vat_percentage').val());
        rowtotal              =  (quantity * unitprice) * vat_percentage;
        $(this).find('.total').text(rowtotal);
        total+=rowtotal;
       })
    });