通过Jquery计算动态生成字段的数量*金额

我无法在jquery中获取动态相关字段的行实时计算结果

第一行是固定的，我得到了正确的结果，但对于动态生成的其余字段，结果是不正确的

计算包括数量*金额=行总计

请参考下面的链接

或以下代码。

<!-- HTML -->
<div class="form-group">
    <form name="add_name" id="add_name">
        <div class="table-responsive">
            <table class="table table-bordered" id="dynamic_field">
                <tr>
                    <td><input type="text" name="qty[]" placeholder="Enter your Qty" class="form-control qty" /></td>
                    <td><input type="text" name="amount[]" placeholder="Enter your amount" class="form-control amount" /></td>
                    <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
                </tr>
            </table>
            <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
        </div>
        <div>total <lable id='total'></lable></div>
    </form>
</div>

<!-- JS -->
<script>
$(document).ready(function(){
    //adding field
    var i=1;
    $('#add').click(function(){
        i++;
        $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="qty[]" placeholder="Enter your qty" class="form-control qty" /></td><td><input type="text" name="amount[]" placeholder="Enter your amount" class="form-control amount" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
    });

    $(document).on('click', '.btn_remove', function(){
        //removing button
        var button_id = $(this).attr("id"); 
        $('#row'+button_id+'').remove();
    });

/*
$(document).on('keyup', '.qty', function(){
        //getting sub total
    var sum =0;
    $(".qty").each(function(){
        sum += Number($(this).val());
    });
    $("#total").text(sum); //changed val() to text()
});

*/  
    $(document).on('keyup', '.amount', function(){
        //getting sub total
    //var sum =0;
    qty = Number($(".qty").val());
    //alert(qty);
    amount = Number($(".amount").val());
    //alert(amount);
    sum = qty * amount;
    $("#total").val(sum); //changed val() to text()
});

$(document).on('click', '.btn_remove', function(){
//Removing and generating total 
        var total = $(".total").val();
            var sum = 0;
            $(".qty").each(function(){
                sum += Number($(this).val());
            });
            total = $("#total").val();
            var New_total = sum-total; 
            $("#total").text(New_total);

});



    $('#submit').click(function(){      
        $.ajax({
            url:"name.php",
            method:"POST",
            data:$('#add_name').serialize(),
            success:function(data)
            {
                alert(data);
                $('#add_name')[0].reset();
            }
        });
    });

});
</script>

添加更多
全部的
$（文档）.ready（函数（）{
//添加字段
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#动态_字段”）.append（'X'）；
});
$（文档）.on（'click'，'btn_remove'，函数（）{
//拆卸按钮
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮id+”）.remove（）；
});
/*
$（document）.on（'keyup'，'qty'，function（）{
//获得小计
var总和=0；
$（“.qty”）。每个（函数（）{
sum+=数字（$（this.val（））；
});
$（“#total”）.text（sum）；//将val（）更改为text（）
});
*/  
$（document）.on（'keyup'，'amount'，function（）{
//获得小计
//var总和=0；
数量=数量（$（“.qty”）.val（））；
//警报（数量）；
金额=数字（$（“.amount”）.val（））；
//警报（金额）；
总和=数量*金额；
$（“#total”）.val（sum）；//将val（）更改为text（）
});
$（文档）.on（'click'，'btn_remove'，函数（）{
//删除并生成总计
var total=$（“.total”）.val（）；
var总和=0；
$（“.qty”）。每个（函数（）{
sum+=数字（$（this.val（））；
});
总计=$（“#总计”）.val（）；
var New_total=总和；
$（“#总计”）.text（新总计）；
});
$（“#提交”）。单击（函数（）{
$.ajax({
url:“name.php”，
方法：“张贴”，
数据：$（'#添加名称'）。序列化（），
成功：功能（数据）
{
警报（数据）；
$（'#添加_名称'）[0].reset（）；
}
});
});
});

首先，从您的小提琴来看，您似乎有一个id逻辑错误，因为所有生成的“total”输入字段将具有相同的id（#total）。您需要做的是拥有一个增量计数器，可以在生成输入字段时将其附加到id。这样，您可以始终确保id保持唯一

我这样做的方式是查看有多少元素具有x名称，计算其总数，并添加+1作为附加到生成的字段id的增量。为了获取该值，可以使用以下方法：

var lastField=$('input[name^="total"]').last().attr('id');

if(lastField)
{
    var count=lastField.replace(/\D/g,'');
}
else
{
    var count=$('input[name^="total"]').length;
}

这将为您提供可用于附加到id的计数。您可以将其添加到创建字段的按钮中，并将计数变量附加到“total”id

我还建议您在price字段中调用一个计算函数onkeyup。现在，您必须更改数量才能显示总价

如果我是你，我会用这种方法使你用按钮创建的每个元素的id都是唯一的。这样，您将永远不会像现在这样遇到id错误。它还可以更容易地针对不同的元素值进行计算等，因为您可以将id解析为附加到生成字段的函数中的参数。这样，您总是有一个方法来处理与“特定”部分/元素等直接相关的特定请求