![](/img/trans.png)
[英]How can I access form input from an input field which was created dynamically via a Javascript function?
[英]How Can I Pull Dynamically Created Input Fields from 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");
如果可以提供任何帮助,那就太好了!
您可以添加一个 object“地址”来存储您的所有地址,然后在输入字段的“更改”事件中,获取正在更改的字段的行 ID 和名称,然后将其添加到地址 object。
我在您的代码中添加了一个基本示例,减去了引发不同错误的排序。 运行代码片段,看看它是如何工作的。
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.