为动态创建的输入标签分配和更新值 - jquery

Question

你好，我有最新的jquery，我有一个如下表，点击添加按钮我会附加一行输入，我想计算按键上每个特定（产品）的总价（即数量*价格=总价），我面临问题，因为我连续动态添加输入，请建议任何解决方案。注意：想要使用 jquery/ javascript 实现解决方案 $(function () {       $("#btnAdd").bind("click", function () {           var div = $("<tr  />");           div.html(GetDynamicTextBox(""));           $("#TextBoxContainer").append(div);       });       $("body").on("click", ".remove", function () {           $(this).closest("tr").remove();       });   });   function GetDynamicTextBox(value) {       return '<td><input name = "particular[]" type="text" class="form-control" placeholder="Particulars" required /></td>'+ '<td><input name = "hsn[]" type="text" class="form-control" placeholder="HSN" required /></td>' + '<td><input name = "qty[]" type="number" class="form-control qty" placeholder="Quantity" required /></td>' + '<td><input name = "price[]" type="number" class="form-control price" placeholder="Price" required /></td>' + '<td><input name = "total[]" type="number" class="form-control total" placeholder="Total" required /></td>'  + '<td><button type="button" class="btn btn-sm btn-danger remove" data-toggle="tooltip" data-original-title="Remove materials items"><i class="fa fa-trash"></i></button></td>'   }<table class="table table-striped table-bordered" id="particulars_table">  <thead>     <tr>        <td>Particular</td>        <td>HSN</td>        <td>Qty</td>        <td>Rate</td>        <td>Action</td>     </tr>  </thead>  <tbody id="TextBoxContainer">  </tbody>  <tfoot>     <tr>        <th colspan="5">           <button id="btnAdd" type="button" class="btn btn-sm btn-success w-100" data-toggle="tooltip" data-original-title="Add more Materials"><i class="glyphicon glyphicon-plus-sign"></i>Add</button>        </th>     </tr>  </tfoot></table>

Answer 1

您可以使用jquery 的keyup方法change，即：每当数量的值发生变化时获取该值，我们将使用它$(this)来获取所需的值tr，我们将获取价格的值并相乘qty，price并将值分配给total输入。

演示代码：

$(function() {

  $("#btnAdd").bind("click", function() {

    var div = $("<tr  />");

    div.html(GetDynamicTextBox(""));

    $("#TextBoxContainer").append(div);

  });

  $("body").on("click", ".remove", function() {

    $(this).closest("tr").remove();

  });

});

function GetDynamicTextBox(value) {

  return '<td><input name = "particular[]" type="text" class="form-control" placeholder="Particulars" required /></td>' + '<td><input name = "hsn[]" type="text" class="form-control" placeholder="HSN" required /></td>' + '<td><input name = "qty[]" type="number" class="form-control qty" placeholder="Quantity" required /></td>' + '<td><input name = "price[]" type="number" class="form-control price" placeholder="Price" required /></td>' + '<td><input name = "total[]" type="number" class="form-control total" placeholder="Total" required /></td>' + '<td><button type="button" class="btn btn-sm btn-danger remove" data-toggle="tooltip" data-original-title="Remove materials items"><i class="fa fa-trash"></i></button></td>'

}

 var rowtoatal = 0;

//on change of qty

$(document).on('change keyup ', '.qty ', function() {

//get qty value

  var qty = $(this).val();

  //getting closest tr

  var elem = $(this).closest("tr");

  //get  price value

  var price = elem.find("td input.price").val();

  //check if price is not null

  if (price !== null && price !== '') {

    rowtoatal = qty * price;

    console.log(qty + " *  " + price + " = " + rowtoatal)

    //adding total to sub_total

    elem.find("td input.total").val(rowtoatal)

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<table class="table table-striped table-bordered" id="particulars_table">

  <thead>

    <tr>

      <td>Particular</td>

      <td>HSN</td>

      <td>Qty</td>

      <td>Rate</td>

      <td>Action</td>

    </tr>

  </thead>

  <tbody id="TextBoxContainer">

  </tbody>

  <tfoot>

    <tr>

      <th colspan="5">

        <button id="btnAdd" type="button" class="btn btn-sm btn-success w-100" data-toggle="tooltip" data-original-title="Add more Materials"><i class="glyphicon glyphicon-plus-sign"></i>Add</button>

      </th>

    </tr>

  </tfoot>

</table>