Question

我有一张表，它可以添加动态行。我想要做的是，计算amount列总和并显示在Expences字段中。然后减少收入和显示的费用总余额字段

例如：当用户在book列中填入第amount行和第一行的价格时，请点击add item按钮并添加另一行。此时计算书籍和笔的总和并显示在{{1 } field.total将显示expences字段。

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>

我尝试了这个查询。这是来自table td class。

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

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

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

2 个答案: