我有动态的添加和删除输入字段。我在绑定上有问题。我已经尝试了很多东西，但是仍然无法按我的意愿工作。当make绑定始终在动态添加和删除输入字段中显示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代码。当我单击“数据表”行上的“编辑”按钮时，它将打开一个模态。编辑工作正常。只是总是出现一行。
<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>
答案 0 :(得分：0)
尝试此代码
var rowList = '';
var rowcount = 0;
$.each(empDetails, function(index, value) {
rowcount++;
$("#schoolName").val(value.schoolName);
$("#schoolAddress").val(value.schoolAddress);
$("#schoolPhone").val(value.schoolPhone);
var contactName = $(this).find('.contactName01').val(value.contactName);
var contactPosition = $(this).find('.contactPosition01').val(value.contactPosition);
var contactPhone = $(this).find('.contactPhone01').val(value.contactPhone);
rowList += '<tr class="data-contact-person">' +
'<td><input type="text" name="schooldetailcollection' + rowcount + '" class="form-control contactname01" value="' + contactName + '" /></td>' +
'<td><input type="text" name="schooldetailcollection' + rowcount + '" class="form-control contactposition01" value="' + contactPosition + '" /></td>' +
'<td><input type="text" name="schooldetailcollection' + rowcount + '" class="form-control contactphone01" value="' + contactPhone + '" /></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>';
});
var hitung = $("#totdet").val(value.totdet);
rowcount = Number(rowcount) + Number(hitung);
$("#totdet").val(rowcount);
$('#maintable tbody').append(rowList);