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留下任何内容。

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

单击行上的按钮时，在javascript中手动构建数据对象;
为布局使用非表格网格解决方案。
在其自己的表中添加每一行，并使表格包裹该表

第三个解决方案是一个黑客，我会自己使用第一个或第二个。

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,
  })
...

更新使用ajax动态添加的行

2 个答案: