Question

我无法在动态相关字段的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>

Answer 1

首先，从你的小提琴看，你似乎有一个id逻辑错误，因为所有生成的“总”输入字段将具有相同的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的计数。您可以将其添加到您创建字段的按钮，并将计数变量附加到“总”ID。

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

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

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

1 个答案: