计算jQuery中所有行的总行数和总数

时间:2016-08-25 19:14:51

标签: javascript jquery ruby-on-rails javascript-events

我有发票行,可以通过按下按钮添加和删除。现在我想分别计算每一行的总金额(公式为(quantity * unitprice)* vat_percentage)。 所有行的总和应该成为发票总额。

我有这个RoR表格:

a ?? b

添加行的代码:

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

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

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

2 个答案:

答案 0 :(得分: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;
});

答案 1 :(得分:0)

通过一个真正的快速,可能会有所帮助

{"accountId":"57abb4d6aad4","address":{"city":"TEST","country":"TEST","postalCode":"TEST","state":"TEST","street":"TEST"},"alternateEmails":[{"email":"TEST"}],"alternatePhoneNumbers":[{"phoneNumber":"TEST"}],"alternateWebsites":[{"website":"TEST"}],"auditOnly":false,"busName":"593163b7-a465-43ea-b8fb-e5b967d9690c","email":"TEST EMAIL","primaryKeyword":"TEST","primaryPhone":"TEST","rankingKeywords":[{"keyword":"TEST","localArea":"TEST"}],"resellerLocationId":"5461caf7-f52f-4c2b-9089-2ir8hgdy62","website":"TEST"}