jQueryの全行と合計の合計を計算します

Question

ボタンを押して追加または削除できる請求書の行があります。今私はそれぞれの行の合計量を計算する（数式が（数量*単価）* vat_percentage）です。 そして、合計されたすべての行の合計が請求書の合計になるはずです。

<%= 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 ++; 
    }); 
    }); 

をI行の合計を計算するためのこのコードを持っている（のNaNを示す私はこのRoRの形を有する

）

ただ実際に素早くすることにより0

Answer 1

が、これが参考になっなります

$(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; 
     }) 
    }); 

Answer 2

はproducts_trクラスで、各要素の上に行くためにeach機能を使用している可能性があります。各行に対して、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; 
});