如何綁定動態添加和刪除字段的值

Question

我有動態添加和刪除輸入字段。 我有問題對其進行綁定。 我已經嘗試了很多東西，但仍然無法按我想要的方式工作。 當進行綁定時，動態添加和刪除輸入字段中總是出現 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>&nbsp;' +
            '<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>&nbsp;
                    <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">&times;</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>

Answer 1

試試這個代碼

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>&nbsp;' +
        '<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);