Question

我们可以获取值的html代码

<input type="text" name="value1[]" id="value1"/>
<input type="mail" name="value2[]" id="value2"/>
<input type="text" name="total[]" id="total" />

我可以在jQuery中尝试此操作，但只能获取html值结果，添加新行后我无法获取值

 $(document).ready(function () {

var counter = 0;

$("#addrow").on("click", function () {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td>Item1</td>';
    cols += '<td><input type="text" class="form-control" name="value1[]"        id="value2' + counter + '"></td>';
    cols += '<td><input type="text" class="form-control" name="foreign_milion[]" id="foreign_milion_' + counter + '"></td>';
    cols += '<td><input type="text" readonly class="form-control" name="total_milion[]" id="total_"' + counter + '"></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
});
    $("#value2").keyup(function () {
        var value1 = $("#value1").val();
        var value2 = $("#value2").val();
        var totalincome = parseInt(value1) + parseInt(value2);
        //alert(totalincome);
        $("#total").val(totalincome);
    })
  });

Answer 1

首先，id在同一文档中必须唯一，否则您将得到不正确的HTML代码，因此第一步，您需要在代码中用通用类替换这些id。

然后，您需要使用事件委托将事件附加到您的输入中，因为必须使用JS代码动态创建它们。

当您跟踪用户输入时，我更喜欢使用input事件而不是keyup，因此该事件类似于：

$(document).ready(function() {
  var counter = 1;

  $("body").on("input", ".calculated_value", function() {
    var parent_row = $(this).closest('tr');
    var totalincome = 0;

    parent_row.find('.calculated_value').each(function() {
      totalincome += parseInt($(this).val() || 0);
    });

    parent_row.find(".total").val(totalincome);
  });

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td>Item ' + counter + '</td>';
    cols += '<td><input type="text" class="form-control calculated_value" name="value1[]"></td>';
    cols += '<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>';
    cols += '<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="order-list">
  <tr>
    <td>Item </td>
    <td><input type="text" class="form-control calculated_value" name="value1[]"></td>
    <td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>
    <td><input type="text" class="form-control total" name="total_milion[]" readonly></td>
  </tr>
</table>
<button id="addrow">Add row</button>

Answer 2

我已经尝试过这个了，也许这就是您正在寻找的东西。请看一下摘要。

jQuery(document).ready(function () {
  var count = 1;
 jQuery('#add').on('click', function(){
  var el = `<section id="inpFields">
  <input type="text" name="value1[]" id="value`+count+`" placeholder="value `+count+`"/>
  <input type="text" name="value2[]" id="value2`+count+`" placeholder="value `+count+`"/>
  <input type="text" name="total[]" id="total`+count+`"  placeholder="total" />
  <button class="totalBtn" data-id="`+count+`">Total</button>
</section>`;
 jQuery('#inpFields').append(el);
 count++;
 });
 
 jQuery('#add').click();
  jQuery(document).on('click', '.totalBtn', function(){
  var i = this.dataset.id;
   var value1 = jQuery('#value'+i).val();
   var value2 = jQuery('#value2'+i).val();
   var totalincome = parseInt(value1) + parseInt(value2);
   //alert(totalincome);
   jQuery('#total'+i).val(totalincome);
   })
 
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="add">Add Fields</button>
<section id="inpFields">
  
</section>

动态添加输入字段值jQuery

2 个答案: