如何計算動態行添加表的總和

-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

如何計算動態行添加表的總和

回答

相關問題