Question

我是一个计算金额总和的表格。使用jquery clone（）动态生成行;

此代码计算渲染行的总和，而不是新创建的行

 $(document).ready(function(){

        $('.datepicker').datepicker();

        var $inst = $('.inst_amount');
            $inst_form = $('.inst_form');
            $total_amount = $('#total_amount');
            $total_price = $('#total_price');
            total = 0;

        $.each($inst, function(index, val) {
            var val = ($(this).val() == "") ? 0 : $(this).val();
            total = total + parseFloat(val);
        });
         $total_price.html(Math.round(total));
         $total_amount.val(Math.round(total));


        $(document).on('blur','.inst_amount', function(){
            var total = 0;
            $.each($inst, function(index, val) {
                var val = ($(this).val() == "") ? 0 : $(this).val();
                total = total + parseFloat(val);
            });
            console.log(total);
            $total_price.html(Math.round(total));
            $total_amount.val(Math.round(total));
        }); 
});

Answer 1

将var $inst = $('.inst_amount');移至您使用的位置：
var total = 0,$inst = $('.inst_amount'); - 实际上甚至没有。查看我的代码
使用逗号分隔变量
干 - 不要重复自己
正确地给出课程并将该字段添加到容器中。

function sumIt() {
  var total = 0, val;
  $('.inst_amount').each(function() {
    val = $(this).val();
    val = isNaN(val) || $.trim(val) === "" ? 0 : parseFloat(val);
    total += val;
  });
  $('#total_price').html(Math.round(total));
  $('#total_amount').val(Math.round(total));
}

$(function() {

  // $('.datepicker').datepicker(); // not needed for this test


  $("#add").on("click", function() {
    $("#container input").last()
      .before($("<input />").prop("class","inst_amount").val(0))
      .before("<br/>");
    sumIt();  
  });


  $(document).on('input', '.inst_amount', sumIt);
  sumIt() // run when loading
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="add" value="add" /><br/>
<form id="inst_form">
<div id="container">
  <input type="text" class="inst_amount" value="4" /><br/>
  <input type="text" class="inst_amount" value="" /><br/>
  <input type="text" id="total_amount" value="0" />
</form>
</div>
<span id="total_price"></span>

Answer 2

此代码仅计算加载页面时可用的所有行的总和。添加新行时，需要调用相同的代码再次生成总计。基本上单击添加行需要重新计算。

Answer 3

将这些代码放在$（document）.ready

之外

$(document).on('blur','.inst_amount', function(){
        var total = 0;
        $.each($inst, function(index, val) {
            var val = ($(this).val() == "") ? 0 : $(this).val();
            total = total + parseFloat(val);
        });
        console.log(total);
        $total_price.html(Math.round(total));
        $total_amount.val(Math.round(total));
    });

因为在$（document）.ready的时候，没有添加新行

使用jquery计算动态添加输入字段的总和

3 个答案: