Question

我动态创建输入，我想在输入时将数字相乘，结果显示在另一个输入中，所有这些结果的总和显示在id 总计的输入中

所以，这是我的代码：

＆＃13;

$route['(.*)'] = 'data/$1';
$route['login-resgistration'] = 'f/login/index';

＆＃13;

问题是当我改变数字时，总和仍然像这样：

必须是10而不是14.如何解决？

我想要一些帮助。

Answer 1

您的部分问题是，您在每次更改事件中累计添加总数。您需要完全根据新值重新计算总数。

您还可以使用DOM遍历来使HTML更清晰，从而将元素相互关联而不是增量id属性，以及在过时的on*事件属性上使用委托事件处理程序。尽可能避免。试试这个：

＆＃13;

$("#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);
}

＆＃13;

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

＆＃13;

Answer 2

您需要根据每个值计算总和，而不是每次都添加新值。

所以我做了什么：

我在每个结果输入中添加了一个“.sum”类（以选择它们）
我做了两个函数：一个用于计算行的结果+一个用于求和
我在keyup事件

所以逻辑是，当你改变输入值时：

行更改的结果（如前所述）
根据每个结果输入计算总和，从0开始（新）

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

希望它有所帮助！

Answer 3

当您更新某个单元格calculate(idx)正在重新计算该行时，但是对于未重新计算的总数，它会将新行的总数添加到先前计算的总数中，alrady已添加旧值

要更正它，您需要将总数重置为0并遍历所有行以重新添加所有行总数。

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

3 个答案: