javascript - 更新使用 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

这是你可以走的方向

$('#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,
  })
...