更新使用Ajax動態添加的行

Question

我希望我能清楚地解釋我的問題。

我正在運行一個函數，使用ajax從數據庫獲取值，並將每個結果添加為表中的一行。 這樣，用戶可以刪除或編輯他們想要的任何行。 我正在將ID動態添加到列中，還動態添加了生成的編輯和刪除按鈕。 所以看起來像這樣：

我的代碼：

function getstationdata(){
var taildata1 = $('#tailnumber2').val();
var uid = $('#uid').val();
$.ajax({
    // give your form the method POST
    type: "POST",
    // give your action attribute the value ajaxadd.php
    url: "ajaxgetstationdata.php",
    data: {tailnumber:taildata1, uid:uid},
    dataType: 'json',
    cache: false,
})
.success(function(response) {
    // remove all errors
    $('input').removeClass('error').next('.errormessage').html('');

    // if there are no errors and there is a result
    if(!response.errors && response.result) {

        var trHTML = '';
        $.each(response.result, function( index, value) {
        trHTML += '<tr><td><input type="text" value="' + value[2] + '"></td><td><input type="text" class="weightinputclass"value="' + value[3] + '"></td><td><input type="text" class="arminputclass"value="' + value[4] + '"></td><td><input type="text" class="momentinputclass" value="' + value[5] + '"></td><td><button id="updatecgbtn" onclick="updatecg()"class="editbuttonclass">Edit</button></td><td><button id="deletecgbtn" class="deletebuttonclass"">Delete</button></td></tr>';

       });
          $('#mbtbody').html('');
          $('#mbtbody').html(trHTML);
          var ID = 0;
          $('.weightinputclass').each(function() {
            ID++;
            $(this).attr('id', 'weightinputboxID'+ID);
            });
          var ID = 0;
          $('.arminputclass').each(function() {
            ID++;
            $(this).attr('id', 'arminputboxID'+ID);
            });               
        var ID = 0;
          $('.momentinputclass').each(function() {
            ID++;
            $(this).attr('id', 'momentinputboxID'+ID);
            });             
        var ID = 0;
          $('.editbuttonclass').each(function() {
            ID++;
            $(this).attr('id', 'editbutton'+ID);
            });             
            var ID = 0;
          $('.deletebuttonclass').each(function() {
            ID++;
            $(this).attr('id', 'deletebutton'+ID);
            });
    } else {

        // append the error to the form
        $.each(response.errors, function( index, value) {
            // add error classes
            $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')
        });

    }
});
}

添加信息時的代碼格式如下：

$('#addstations').on('submit', function(e){
    e.preventDefault();

    $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),
        dataType: 'json',
        cache: false,
    })
    .success(function(response) {
        $('input').removeClass('error').next('.errormessage').html('');
        if(!response.errors && response.result) {
            $.each(response.result, function( index, value) {
            chartdata4=(tailnumber3.value)
            });
        } else {
            // append the error to the form
            $.each(response.errors, function( index, value) {
                // add error classes
                $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')

            });
        }
    });
});

我在互聯網上搜索了一下，發現無法在表格內為每一行添加一個表單，而這很容易做到，並且我可以重用我在添加新信息時使用的代碼。

因此，有人可以指出正確的方向嗎？

Answer 1

我認為問題是您想添加一個form作為table / tbody元素的子代來包裝您的行。 您無法執行此操作，瀏覽器很可能會剝離form標簽，而無需進行serialize 。

有不同的解決方案，例如：

1. 單擊一行上的按鈕時，使用javascript手動構建數據對象；
2. 對您的布局使用非表單網格解決方案。
3. 將每一行添加到自己的表中，並用表格包裝該表

第三個解決方案有點麻煩，我會自己使用第一個或第二個。

Answer 2

這是你可以走的方向

$('#formTable').on('click',"button" function(e){
  var $row = $(this).closest("tr"), $form = $("#addstations");
  var data = {
     passenger:$row.find("passengerClass").val(),
     weight   :$row.find("weightClass").val()
  } // no comma on the last item
  data["type"]=this.className=="deletebuttonclass"?"delete":"edit";

  $.ajax({
    type: $form.attr('method'),
    url:  $form.attr('action'),
    dataType: 'json',
    cache: false,
  })
...