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

我有一个表，它可以添加动态行。我试图做的是，计算

金额

列总和，并显示在

费用

字段中。然后从收入中减少费用，并在余额字段中显示总额

例如： 当用户在第一行填写

书籍

和

金额

列中的书籍价格时。然后单击

添加项目

按钮并添加另一行。此时，计算书籍和笔的总和并显示在

费用

字段中。总计将显示

余额

字段

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

---

这可能是因为，您的函数

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尝试下面的代码，它也适用于动态元素，只需确保它们具有
类
名称
金额
：


$（“.amount”）。在（'change'，计算）；
函数计算（）{
var总和=0；
$（'.amount'）。每个（函数（i，obj）{
如果（$.isNumeric（this.value））{
sum+=parseFloat（此.value）；
}
});
$（'费用'）.val（总和）；
}

金额：
金额：
金额：
费用：
是的，我想就是这个了！您可以进一步简化
！isNaN（this.value）&&this.value.length=0
by
$.isNumeric（this.value）
因为您显然在使用jquery。@Ravi，这不适用于动态添加的金额行，标记“amount”是代码中的名称。不是示例中使用的类。@RamakanthPutta
amount
不是标记，而是类。根据他现有的js代码，不要忘记接受和投票的答案，这很有帮助。
$(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);    
}; 

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


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

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