时间戳

首页 > 解决方案 > 动态添加输入字段值jQuery

javascript - 动态添加输入字段值jQuery

问题描述

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);
    })
  });

标签： javascriptjquery

解决方案

首先，同一文档中的 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>

推荐阅读