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

-1

我有一个表，它可以添加动态行。我要做的是，计算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);  
};

来源

2017-07-02 Tje123

不忘记接受并赞扬答案，这有助于。 – Ravi

这可能是因为，你的函数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<<

来源

2017-07-02 06:26:58 Ravi

是的，我相信这就是它！你可以用'$ .isNumeric（this.value）'进一步简化你的'！isNaN（this.value）&& this.value.length！= 0'，因为你清楚*使用jquery。 – cars10m

谢谢。我已经更新了我的答案。 – Ravi

@Ravi，这不适用于动态添加数量的行，标签“数量”是他的代码中的名称。没有在你的例子中使用的类。 –

尝试下面的代码，它将为动态元素的工作太多，只是确保他们有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">

来源

2017-07-02 07:21:39

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

回答

相关问题