Как я могу получить динамически созданные поля ввода из jQuery / JavaScript

Question

У меня проблемы с извлечением информации из динамически создаваемых текстовых полей в контейнере из bootstrap. Для того, что у меня есть для «Dropoff Locations», мне нужно иметь возможность хранить информацию об адресе в одном адресе, а затем каждый полный адрес в массиве адресов. Я не уверен, как это сделать, особенно с использованием jQuery.

<!-- Dropoff Locations -->
  <div class=" mb-4">
    <div class="card border-0 shadow">
      <div class="card-body text-center">
        <h5 class="card-title mb-0">Drop-Off Location(s)</h5>
        <hr>
        <div class="container">
          <div class="row clearfix">
               <div class="col-md-12 table-responsive">
                        <table class="table table-bordered table-hover table-sortable" id="tab_logic">
                                <thead>
                                    <tr>
                                         <th class="text-center">
                                            Street Address
                                         </th>
                                         <th class="text-center">
                                            City
                                         </th>
                                     <th class="text-center">
                                            State
                                         </th>
                                  </tr>
                               </thead>
                             <tbody>
                            <tr id='addr0' data-id="0" class="hidden">
                                <td data-name="name">
                                    <input type="text" name='name0'  placeholder='Street Address' class="form-control"/>
                                </td>
                                <td data-name="mail">
                                    <input type="text" name='mail0' placeholder='City' class="form-control"/>
                                </td>
                                <td data-name="desc">
                                    <input type="text" name="desc0" placeholder="State" class="form-control"/>
                                </td>
                      <td data-name="del">
                          <button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'><span aria-hidden="true">×</span></button>
                      </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
              </div>
             <a id="add_row" class="btn btn-primary float-right text-white">Add Stop</a>

Это код сценария

$(document).ready(function() {
$("#add_row").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
        if (parseInt($(this).data("id")) > newid) {
            newid = parseInt($(this).data("id"));
        }
    });
    newid++;

    var tr = $("<tr></tr>", {
        id: "addr"+newid,
        "data-id": newid
    });

    // loop through each td and create new elements with name of newid
    $.each($("#tab_logic tbody tr:nth(0) td"), function() {
        var td;
        var cur_td = $(this);

        var children = cur_td.children();

        // add new td and element if it has a nane
        if ($(this).data("name") !== undefined) {
            td = $("<td></td>", {
                "data-name": $(cur_td).data("name")
            });

            var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
            c.attr("name", $(cur_td).data("name") + newid);
            c.appendTo($(td));
            td.appendTo($(tr));
        } else {
            td = $("<td></td>", {
                'text': $('#tab_logic tr').length
            }).appendTo($(tr));
        }
    });

    // add delete button and td
    /*
    $("<td></td>").append(
        $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>")
            .click(function() {
                $(this).closest("tr").remove();
            })
    ).appendTo($(tr));
    */

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
         $(this).closest("tr").remove();
    });




// Sortable Code
var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width())
    });

    return $helper;
};

$(".table-sortable tbody").sortable({
    helper: fixHelperModified
}).disableSelection();

$(".table-sortable thead").disableSelection();



$("#add_row").trigger("click");

, если какая-либо помощь может быть оказана, это было бы здорово!

Answer 1

Вы можете добавить объект «адреса» для хранения всех ваших адресов, а затем при событии «изменения» поля ввода получить идентификатор строки и имя изменяемого поля, а затем добавить его к адресам объект.

Я добавил базовый c пример в ваш код, за исключением сортировки, которая вызвала другую ошибку. Запустите фрагмент кода, чтобы увидеть, как он работает.

$(document).ready(function() {
  var addresses = {};
  
  $(document).on('change', '#tab_logic input', function () {
    var rowid = $(this).parents('tr').attr('id');
    var name = $(this).attr('name');
    // Initialize address row if it hasn't been created yet.
    if (!addresses[rowid]) addresses[rowid] = {};
    // Add or update this field.
    addresses[rowid][name] = $(this).val();
    
    console.log(addresses);
  });

  $("#add_row").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
        if (parseInt($(this).data("id")) > newid) {
            newid = parseInt($(this).data("id"));
        }
    });
    newid++;
    
    console.log(newid);

    var tr = $("<tr></tr>", {
        id: "addr"+newid,
        "data-id": newid
    });

    // loop through each td and create new elements with name of newid
    $.each($("#tab_logic tbody tr:nth(0) td"), function() {
        var td;
        var cur_td = $(this);

        var children = cur_td.children();

        // add new td and element if it has a nane
        if ($(this).data("name") !== undefined) {
            td = $("<td></td>", {
                "data-name": $(cur_td).data("name")
            });

            var c =   $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
            c.attr("name", $(cur_td).data("name") + newid);
            c.appendTo($(td));
            td.appendTo($(tr));
        } else {
            td = $("<td></td>", {
                'text': $('#tab_logic tr').length
            }).appendTo($(tr));
        }
    });

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
         $(this).closest("tr").remove();
    });


  });
});



$("#add_row").trigger("click");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Dropoff Locations -->
  <div class=" mb-4">
    <div class="card border-0 shadow">
      <div class="card-body text-center">
        <h5 class="card-title mb-0">Drop-Off Location(s)</h5>
        <hr>
        <div class="container">
          <div class="row clearfix">
               <div class="col-md-12 table-responsive">
                        <table class="table table-bordered table-hover table-sortable" id="tab_logic">
                                <thead>
                                    <tr>
                                         <th class="text-center">
                                            Street Address
                                         </th>
                                         <th class="text-center">
                                            City
                                         </th>
                                     <th class="text-center">
                                            State
                                         </th>
                                  </tr>
                               </thead>
                             <tbody>
                            <tr id='addr0' data-id="0" class="hidden">
                                <td data-name="name">
                                    <input type="text" name='name0'  placeholder='Street Address' class="form-control"/>
                                </td>
                                <td data-name="mail">
                                    <input type="text" name='mail0' placeholder='City' class="form-control"/>
                                </td>
                                <td data-name="desc">
                                    <input type="text" name="desc0" placeholder="State" class="form-control"/>
                                </td>
                      <td data-name="del">
                          <button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'><span aria-hidden="true">×</span></button>
                      </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
              </div>
             <a id="add_row" class="btn btn-primary float-right text-white">Add Stop</a>