2016-08-25 27 views
0

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

<%= 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
+0

ご質問はありますか? – depperm

+0

すべての行が同じクラスを持ち、すべての行合計をどのように一緒に追加するので、各行の合計をどのように計算しますか? – luissimo

+0

クラスに対して$ .each()イテレーターを使用し、各反復で各変数の合計値を加算し、ループの後に合計要約ロジックを実行します。 –

答えて

0

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

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

これは完全に正解ではありませんでしたが、正しい軌道に乗るのを助けました – luissimo

1

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

助けてくれてありがとうございます。しかし、残念ながらNaNの値を与えています。 – luissimo

+0

値のランダムなテーブルでテストしました。あなたはそれを使用しますか? – depperm

+0

元の投稿に追加したフォームに使用しました。そして私は.on()を使っていろいろな種類のバリエーションを試し、vat_percentageを削除しましたが、NaN / – luissimo

関連する問題