【发布时间】：2019-11-09 06:48:36
【问题描述】：
我有动态添加和删除输入字段。我有问题要绑定它。我已经尝试了很多东西，但仍然无法按我的意愿工作。当 make binding 总是在动态添加和删除输入字段中出现 1 个数据行时。
$(document).on("click", ".editButton", function() {
$('#myModal').focus();
var id = $(this).attr("data-id");
$("#btnUpdate").attr("edit-id", id);
$.ajax({
type: "Post",
contentType: "application/json; charset=utf-8",
url: "SchoolList.aspx/EditData",
data: '{eid: ' + id + '}',
dataType: "json",
success: function(data) {
var empDetails = $.parseJSON(data.d);
console.log('empdet' + data.d);
$.each(empDetails, function(index, value) {
$("#schoolName").val(value.schoolName);
$("#schoolAddress").val(value.schoolAddress);
$("#schoolPhone").val(value.schoolPhone);
var data2 = [];
$('tr.data-contact-person').each(function() {
console.log('nama : ' + value.contactName);
var contactName = $(this).find('.contactName01').val(value.contactName);
var contactPosition = $(this).find('.contactPosition01').val(value.contactPosition);
var contactPhone = $(this).find('.contactPhone01').val(value.contactPhone);
var alldata = {
'contactName': contactName,
'contactPosition': contactPosition,
'contactPhone': contactPhone
}
//the binding detail start on this section of 'tr'. always appear 1 time
var hitung = $("#totdet").val(value.totdet);
console.log(value.totdet);
var rowcount2 = hitung.length + 1;
'<tr class="data-contact-person">' +
'<td><input type="text" name="schooldetailcollection' + rowcount2 + '" class="form-control contactname01" /></td>' +
'<td><input type="text" name="schooldetailcollection' + rowcount2 + '" class="form-control contactposition01" /></td>' +
'<td><input type="text" name="schooldetailcollection' + rowcount2 + '" class="form-control contactphone01" /></td>' +
'<td><button type="button" id="btnadd" class="btn btn-xs btn-primary classadd">tambah</button> ' +
'<button type="button" id="btndelete" class="deletecontact btn btn btn-danger btn-xs">hapus</button></td>' +
'</tr>';
$('#maintable').append(alldata);
data2.push(alldata);
});
});
},
error: function() {
alert("Error :" + id);
}
});
});
这是我的 HTML 代码。当我单击 Datatable 行上的 Edit 按钮时，它将打开一个 Modal。编辑工作很好。只是它总是出现一行。
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<i class="fas fa-user"></i>
<h5 class="modal-title" id="myModalLabel">Update Data Sekolah</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="panel-body">
<div class="form-group">
<div class="form-row">
<div class="col-md-12">
<b><i class="fas fa-id-card-o"></i>
<label>Nama Sekolah</label></b>
<input type="text" id="schoolName" class="form-control" required="required" style="height: 45px">
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-12">
<b>
<label>Alamat Sekolah</label></b>
<input type="text" id="schoolAddress" class="form-control" required="required" style="height: 45px">
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-12">
<b>
<label>No. Telepon Sekolah</label></b>
<input type="text" id="schoolPhone" class="form-control" required="required" style="height: 45px">
</div>
</div>
</div>
<div class="form-group">
<table class="table" border="1" id="maintable">
<thead>
<tr>
<th>Nama Kontak</th>
<th>Jabatan</th>
<th>No. Telepon</th>
</tr>
</thead>
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" name="contactName" class="form-control contactName01" /></td>
<td>
<input type="text" name="contactPosition" class="form-control contactPosition01" /></td>
<td>
<input type="text" name="contactPhone" class="form-control contactPhone01" /></td>
<td>
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Tambah</button>
</td>
</tr>
</tbody>
</table>
</div>
<asp:HiddenField runat="server" ID="totDet" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">tutup</button>
<button type="button" id="btnUpdate" class="btn btn-primary" edit-id="" data-dismiss="modal">simpan</button>
</div>
</div>
</div>
</div>
【问题讨论】：
-
请提供您尝试过的代码并解释您遇到的错误！！！
-
嗨，我已经提供了
-
你没有提供你的 HTML，我也没有仔细看，但是像
$("#schoolName").val(value.schoolName);这样的声明在循环中似乎很可疑；你的意思是在每次迭代中继续覆盖输入的值吗？ -
请提供一个Minimal, Reproducible Example 来证明该问题。您发布的代码不能按原样使用，不是最小的，我们不知道哪些有效，哪些无效。
-
MrUpsidown。我添加更多细节。谢谢你的建议。
标签： javascript c# jquery ajax