在Jquery中动态创建的输入值相乘和求和

Question

I'm creating inputs dynamically in which I want to multiply numbers while I'm typing and the result shows in another input and also the sum of all those results shows in an input with id total .

So, this is my code:

 <div class="inputs"></div> <button type="button" id="new">NEW</button><br><br> Total:<input id="total" type="text" readonly> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script> $("#new").click(function(){ var cont = $(".numb").length; var index = cont + 1; var add = "<div><input class='numb' id='nn_"+index+"' onkeyup='calculate("+index+")'> X <input id='mm_"+index+"' onkeyup='calculate("+index+")'> = <input id='result_"+index+"' readonly></div>"; $(".inputs").append(add); }); function calculate(idx){ $("#result_" + idx).val($("#nn_" + idx).val() * $("#mm_" + idx).val()); $("#total").val(Number($("#total").val()) + Number($("#result_" + idx).val())); } </script> 

The problem is when I change numbers, total sum is still going like this case:

It must be 10 and no 14. How can fix it?

I'd like some help.

Answer 1

Part of your issue is that you're cumulatively adding to the total on each change event. You instead need to re-calculate the total entirely based on the new values.

You can also make the HTML cleaner by using DOM traversal to relate the elements to each other instead of incremental id attributes as well as using delegated event handlers over the outdated on* event attributes, which should be avoided where possible. Try this:

 $("#new").click(function() { $(".inputs").append('<div><input class="number"> X <input class="multi" /> = <input class="line-total" readonly /></div>'); }); $('.inputs').on('input', '.number, .multi', function() { var $container = $(this).closest('div'); var number = $container.find('.number').val() || 0; var multi = $container.find('.multi').val() || 0; $container.find('.line-total').val(number * multi); updateTotal(); }); function updateTotal() { var total = 0; $('.line-total').each(function() { total += parseInt($(this).val(), 10); }); $('#total').val(total); } 

 <div class="inputs"></div> <button type="button" id="new">NEW</button><br><br> Total: <input id="total" type="text" readonly> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 

Answer 2

You need to calculate the sum according to each value and not add every time the new value.

So what I did :

• I added a class ".sum" to each result input (to select them)

• I made 2 functions : one to calculate the result of the row + one for the sum

• I added the new function on keyup event

So the logic is, when you change an input value :

• the result of the row change (as before)
• you calculate the sum according to each result input, starting at 0 (new)

 <div class="inputs"></div> <button type="button" id="new">NEW</button><br><br> Total:<input id="total" type="text" readonly> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script> $("#new").click(function(){ var cont = $(".numb").length; var index = cont + 1; var add = "<div><input class='numb' id='nn_"+index+"' onkeyup='calculate("+index+"); total()'> X <input id='mm_"+index+"' onkeyup='calculate("+index+"); total()'> = <input class='sum' id='result_"+index+"' readonly></div>"; $(".inputs").append(add); }); function calculate(idx){ $("#result_" + idx).val($("#nn_" + idx).val() * $("#mm_" + idx).val()); } function total() { var sum = 0; $.each($(".sum"), function() { sum = sum + Number($(this).val()); }); $("#total").val(sum); } </script> 

Hope it helps !

Answer 3

When you update a cell calculate(idx) is recalculating the row, but for the total it is not recalculating, it is adding the new row's total to the previously calculated total that alrady had added the old value.

To correct it you need to reset the total to 0 and loop through all rows to re-add all the row totals.