如何从jQuery/JavaScript中提取动态创建的输入字段

从引导中从容器内动态创建的文本字段中提取信息时遇到问题。对于“下车地点”，我需要能够将一个地址的信息存储到一个地址中，然后将每个完整地址存储到一个地址数组中。我不确定如何做到这一点，尤其是使用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");

$（文档）.ready（函数（）{
$（“添加行”）。在（“单击”，函数（）上{
//动态行代码
//获取最大行id并设置新id
var-newid=0；
$.each（$（“#tab_logic tr”），函数（）{
if（parseInt（$（this.data（“id”））>newid）{
newid=parseInt（$（this）.data（“id”）；
}
});
newid++；
var tr=$（“”{
id:“地址”+新id，
“数据id”：newid
});
//循环遍历每个td并创建名为newid的新元素
$。每个（$（“#tab#u逻辑体tr:n（0）td”），函数（）{
var-td；
var cur_td=$（本）；
var children=cur_td.children（）；
//添加新的td和元素（如果有nane）
if（$（this）.data（“name”）！==未定义）{
td=$（“”），单位：{
“数据名称”：$（cur_td）.data（“名称”）
});
var c=$（cur_td）.find（$（children[0]）.prop（'tagName'））.clone（）.val（“”）；
c、 属性（“名称”），$（cur_td）.data（“名称”）+newid）；
c、 附件(元);；
td.附件(元(tr);；
}否则{
td=$（“”），单位：{
“text”：$（“#tab_logic tr”）。长度
})。附件（$（tr））；
}
});
//添加删除按钮和td
/*
$（“”）。附加(
$("")
。单击（函数（）{
$（this）.tr.remove（）；
})
)。附件（$（tr））；
*/
//添加新行
$（tr）.appendTo（$（'tab#u logic'）；
$（tr）.find（“td-button.row-remove”）.on（“单击”，函数（）{
$（this）.tr.remove（）；
});
//可排序代码
var FIXHELPERMODIFED=函数（e，tr）{
var$originals=tr.children（）；
var$helper=tr.clone（）；
$helper.children（）.each（函数（索引）{
$（this）.width（$originals.eq（index.width（））
});
返回$helper；
};
$（“.table sortable tbody”）.sortable({
帮助者：修改的fixHelperModified
}).disableSelection（）；
$（“.table可排序thead”）.disableSelection（）；
$（“添加行”）。触发器（“单击”）；

如果可以提供任何帮助，那就太好了！

您可以添加一个对象“addresses”来存储所有地址，然后在输入字段的“change”事件中，获取要更改的字段的行id和名称，然后将其添加到addresses对象中

我在你的代码中添加了一个基本的示例，减去了引发不同错误的排序。运行代码片段看看它是如何工作的

$（文档）.ready（函数（）{
var地址={}；
$（文档）.on（'change'，'tab#u逻辑输入'，函数（）{
var rowid=$（this.parents（'tr'）.attr（'id'）；
var name=$（this.attr（'name'）；
//如果尚未创建地址行，则初始化地址行。
如果（！addresses[rowid]）地址[rowid]={}；
//添加或更新此字段。
地址[rowid][name]=$（this.val（）；
控制台日志（地址）；
});
$（“添加行”）。在（“单击”，函数（）上{
//动态行代码
//获取最大行id并设置新id
var-newid=0；
$.each（$（“#tab_logic tr”），函数（）{
if（parseInt（$（this.data（“id”））>newid）{
newid=parseInt（$（this）.data（“id”）；
}
});
newid++；
console.log（newid）；
var tr=$（“”{
id:“地址”+新id，
“数据id”：newid
});
//循环遍历每个td并创建名为newid的新元素
$。每个（$（“#tab#u逻辑体tr:n（0）td”），函数（）{
var-td；
var cur_td=$（本）；
var children=cur_td.children（）；
//添加新的td和元素（如果有nane）
if（$（this）.data（“name”）！==未定义）{
td=$（“”），单位：{
“数据名称”：$（cur_td）.data（“名称”）
});
var c=$（cur_td）.find（$（children[0]）.prop（'tagName'））.clone（）.val（“”）；
c、 属性（“名称”），$（cur_td）.data（“名称”）+newid）；
c、 附件(元);；
td.附件(元(tr);；
}否则{
td=$（“”），单位：{
“text”：$（“#tab_logic tr”）。长度
})。附件（$（tr））；
}
});
//添加新行
$（tr）.appendTo（$（'tab#u logic'）；
$（tr）.find（“td-button.row-remove”）.on（“单击”，函数（）{
$（this）.tr.remove（）；
});
});
});
$（“添加行”）。触发器（“单击”）；

下车地点