如何计算动态行添加表的总和

Question

我有一个表，它可以添加动态行。我要做的是，计算amount列总数并显示在Expences字段中。然后减少收入并显示总额在资产负债场

如： 当用户填写第一行与book和价格本书amount column.then点击add item按钮，并添加本子和笔和显示器的另一row.that时间计算总和expences field.total意志显示balance字段。

<div class="col-xs-12">Income (Rs) : <input type="number" min="0.01" step="0.01" name="income" value="2536.67" id="income" > 
      </div> 
      <div class="col-xs-12">Expences (Rs) : <input type="number" min="0.01" step="0.01" name="expence" value="" readonly id="expence"> 
      </div> 
      <div class="col-xs-12">Balance (Rs) : <input type="number" min="0.01" step="0.01" name="balance" value="" readonly id="balance"> 
      </div> 

<table class="table table-bordered table-hover" id="tab_logic"> 
       <thead> 
        <tr > 
         <th class="text-center"> 
          # 
         </th> 
         <th class="text-center"> 
          Category 
         </th> 
         <th class="text-center"> 
          Item Name 
         </th> 
         <th class="text-center"> 
          Amount 
         </th> 
         <th class="text-center"> 

         </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr id='addr0'> 
         <td> 
         1 
         </td> 
         <td> 
         <select class="form-control" name="cat"> 
          <option value="bill">Bill</option> 
          <option value="exchange">Exchange</option> 

         </select> 
         </td> 
         <td> 
         <input type="text" name='name0' placeholder='Item Name' class="form-control"/> 
         </td> 
         <td class='amount'> 
         <input type="number" name='amount' placeholder='Amount' class="form-control" id='amount'/> 
         </td> 
         <td> 
          <input type="file" class="form-control" name="upload" /> 

         </td> 
        </tr> 
        <tr id='addr1'></tr> 
       </tbody> 
      </table> 

    <a id="add_row" class="btn btn-default pull-left">Add Item</a><a id='delete_row' class="pull-right btn btn-default">Delete Item</a> 

    <button type="Submit" class="btn btn-success pull-right btn-lg" >Submit</button> 

添加，删除行查询

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var i=1; 
    $("#add_row").click(function(){ 
     $('#addr'+i).html("<td>"+ (i+1) +"</td><td><select class='form-control' name='cat"+i+"'><option value='bill'>Bill</option><option value='exchange'>Exchange</option></select><td><input name='name"+i+"' type='text' placeholder='Item Name' class='form-control input-md' /> </td><td class='amount'><input name='mail"+i+"' type='number' min='0.01' step='0.01' placeholder='Amount' id='amount"+i+"' class='form-control input-md'></td><td><input type='file' name='upload"+i+"' class='form-control'/></td>"); 

     $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); 
     i++; 
    }); 
    $("#delete_row").click(function(){ 
     if(i>1){ 
     $("#addr"+(i-1)).html(''); 
     i--; 
     } 
    }); 

}); 

</script> 

我想这query.this从表TD类CAL。

$(document).ready(function(){ 
$('.amount').each(function() { 
    calculateSum(); 
}); 
}); 

function calculateSum() { 

var sum = 0; 

    $(".amount").each(function() { 

     //add only if the value is number 
     if(!isNaN(this.value) && this.value.length!=0) { 
      sum += parseFloat(this.value); 
     } 

    }); 
$('#expence').text(sum);  
}; 

Answer 1

这可能是因为，你的函数calculateSum();不会触发。您可以使用.change检查此类的任何值是否更改，然后计算总和。

$(".amount").change(function(){ 
var sum=0; 
$('.amount').each(function(i, obj){ 


if($.isNumeric(this.value)) { 
      sum += parseFloat(this.value); 
     } 

}) 
$('#expence').val(sum); 
}); 

>>Demo<<

Answer 2

尝试下面的代码，它将为动态元素的工作太多，只是确保他们有class名amount：

$(".amount").on('change', calculate); 
 

 
function calculate() { 
 
    var sum = 0; 
 
    $('.amount').each(function(i, obj) { 
 
    if ($.isNumeric(this.value)) { 
 
     sum += parseFloat(this.value); 
 
    } 
 
    }); 
 
    $('#expense').val(sum); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Amount : <input type="text" class="amount"><br/> Amount : <input type="text" class="amount"><br/> Amount : <input type="text" class="amount"><br/> Expense : <input type="text" id="expense">