演示

Question

找到了可以解决我的问题的问题，并根据我的需要dynamic forms multiple input fields calculate

但是我注意到当我更新上一行的数量时，总量没有更新。您能帮我解决这个问题吗？预先谢谢你！

"qrc:/Test"

 $(document).ready(function() {
  var i = 0;
  $("#quantity-" + i).change(function() {
    upd_art(i)
  });
  $("#price-" + i).change(function() {
    upd_art(i)
  });


  $('#add').click(function() {
    i++;
    $('#articles').append('<tr id="row' + i + '"><td><input type="number" value=0 id="quantity-' + i + '" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td> <td><input type="number" id="price-' + i + '" name="price[]" value=0  placeholder="price" class="form-control name_list" /></td> <td><input type="number" id="total-' + i + '" name="total[]" placeholder="total" class="form-control name_list" readonly /></td> <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');

    $("#quantity-" + i).change(function() {
      upd_art(i)
    });
    $("#price-" + i).change(function() {
      upd_art(i)
    });


  });


  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });

  $('#submit').click(function() {
    alert($('#add_name').serialize()); //alerts all values           
    $.ajax({
      url: "wwwdb.php",
      method: "POST",
      data: $('#add_name').serialize(),
      success: function(data) {
        $('#add_name')[0].reset();
      }
    });
  });

  function upd_art(i) {
    var qty = $('#quantity-' + i).val();
    var price = $('#price-' + i).val();
    var totNumber = (qty * price);
    var tot = totNumber.toFixed(2);
    $('#total-' + i).val(tot);
  }



  //  setInterval(upd_art, 1000);
  });

Answer 1

您的问题是您在更新函数（这是一个全局变量）中重新使用了i。这意味着它仅适用于最新行，因为每次更改事件触发时，它都会更新与当前i（即最后一个）值匹配的行。您需要将特定行的索引传递给函数，而不是当前的总行数。

您可以通过从现有输入id中获取它来完成此操作（即删除诸如quantity-之类的常见文本），但我建议您为每个输入添加属性for，与行的索引匹配。

您还可以通过将通用类添加到将触发重新计算的输入中来简化点击事件。

演示

// Be careful when using global variables
var rowCount = 0;

// Minor changes here
// Added "for='i'" for input
// Added .quantity, .price and .total to the relevant inputs
$('#add').click(function() {

  rowCount++;

  $('#articles').append('<tr id="row' + rowCount + '"><td><input type="number" value=0 id="quantity-' + rowCount + '" name="quantity[]" placeholder="quantity" class="form-control name_list quantity" for="' + rowCount + '" /></td> <td><input type="number" id="price-' + rowCount + '" name="price[]" value=0  placeholder="price" class="form-control name_list price" for="' + rowCount + '" /></td> <td><input type="number" id="total-' + rowCount + '" name="total[]" placeholder="total" class="form-control name_list total" for="' + rowCount + '" readonly /></td> <td><button type="button" name="remove" id="' + rowCount + '" class="btn btn-danger btn_remove">X</button></td></tr>');

  // No need to add individual events here

});


// Add a generic event listener for any change on quantity or price classed inputs
$("#articles").on('change', 'input.quantity, input.price', function() {
  upd_art($(this).attr("for"));
});

// No changes
$(document).on('change', 'input', function() {
  var button_id = $(this).attr("id");
  $('#row' + button_id + '').remove();
});

// No changes
$('#submit').click(function() {
  alert($('#add_name').serialize()); //alerts all values           
  $.ajax({
    url: "wwwdb.php",
    method: "POST",
    data: $('#add_name').serialize(),
    success: function(data) {
      $('#add_name')[0].reset();
    }
  });
});


// Using a new index rather than your global variable i
function upd_art(ind) {
  
  var qty = $('#quantity-' + ind).val();
  var price = $('#price-' + ind).val();
  var totNumber = (qty * price);
  var tot = totNumber.toFixed(2);
  $('#total-' + ind).val(tot);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <br />
    <br />
    <div class="form-group">
      <form name="add_name" id="add_name">
        <div class="table-responsive">
          <table class="table table-bordered" id="articles">
            <tr class="rrjeshta">

              <td><input value=0 type="number" id="quantity-0" name="quantity[]" placeholder="quantity" class="form-control name_list quantity" for="0"/></td>
              <td><input value=0 type="number" id="price-0" name="price[]" placeholder="price" class="form-control name_list price" for="0" /></td>

              <td><input type="number" id="total-0" name="total[]" placeholder="total" class="form-control name_list total" for="0" readonly /></td>
              <td><button type="button" name="add" id="add" class="btn btn-success">Add new</button></td>
            </tr>
          </table>
          <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
        </div>
      </form>
    </div>
  </div>

前一行不是使用jquery从附加行计算/更新

1 个答案:

演示