Question

我使用此代码在模态隐藏事件上创建一个带有Ajax查询的表。

$('#modalarticulos').on('hidden.bs.modal', function () {;

    sel_articulos =  $("input[name='check_art']:checked").map(function ()
    {
        return this.value;
    }).get();
console.log(sel_articulos);
$("#sel_articulos tbody").empty();
ii =0;
var tbody = $('#sel_articulos tbody');
$.each(sel_articulos, function(ii, sel_articulo) {
    var tr = $("<tr id=artrow["+ii+"]>");
    $.ajax({
        type: 'POST',
        url: "<?php echo $_SERVER_ADDR . PUBLIC_PATH .'presupuestos/buscart/'; ?>",
        data: { 'id':sel_articulos[ii]},
        dataType: "json",
        success: function(response) {
            $("<td id='id["+ii+"]'>").html(response["id"]).appendTo(tr);
            $("<td id='tipart["+ii+"]'>").html(response["tipart"]).appendTo(tr);
            $("<td id='codart["+ii+"]'>").html(response["codart"]).appendTo(tr);
            $("<td id='desart["+ii+"]'>").html(response["desart"]).appendTo(tr);
            $("<td id='canart["+ii+"]'><input type='number' id='cantidad["+ii+"]' min='0' max='999' step='1' class='input-mini text-right cantidart' value='1'>").appendTo(tr);
            $("<td id='precio["+ii+"]'>").html(response["precio"]).appendTo(tr);
            $("<td id='subtot["+ii+"]'>").html("<label id='subtotal["+ii+"]' class='text-success subtotal'>"+response["precio"]).appendTo(tr);
            tbody.append(tr);
            },
        error: function() {
            alert('Error occurs!');
            }
       });
   });
$('#sel_articulos > tbody').after(<tr><td></td><td></td><td></td><td></td><td><label class='subtotalg'>SUB-TOTAL</label></td><td></td><td><label id='subtotalsi' class='text-success subtotalg'>Subtotal</label></td></tr>;
})

问题1 我面临的问题是我需要最后一行（后面添加的那一行，身体）在身体内部，现在它正在它外部创建结果是它没有被清除：

$("#sel_articulos tbody").empty();

问题2 ：除此之外，我想知道是否有另一种方法来安排创建该表以提高其效率。谢谢。

Answer 1

$.after在所选元素后面添加一个元素。你需要$.append在所选元素中添加一个元素。

这样做：

$('#sel_articulos > tbody').append(<tr><td></td><td></td><td></td><td></td><td><label class='subtotalg'>SUB-TOTAL</label></td><td></td><td><label id='subtotalsi' class='text-success subtotalg'>Subtotal</label></td></tr>;

<强>更新

根据您的评论，您需要在添加行后添加它。只需检查您是否先添加最后一行。

 $.each(sel_articulos, function(ii, sel_articulo) {
      $.ajax({
         type: 'POST',
         url: "<?php echo $_SERVER_ADDR . PUBLIC_PATH .'presupuestos/buscart/'; ?>",
         data: { 'id':sel_articulos[ii]},
         dataType: "json",
         success: function(response) {
             $("<td id='id["+ii+"]'>").html(response["id"]).appendTo(tr);
             $("<td id='tipart["+ii+"]'>").html(response["tipart"]).appendTo(tr);
             $("<td id='codart["+ii+"]'>").html(response["codart"]).appendTo(tr);
             $("<td id='desart["+ii+"]'>").html(response["desart"]).appendTo(tr);
             $("<td id='canart["+ii+"]'><input type='number' id='cantidad["+ii+"]' min='0' max='999' step='1' class='input-mini text-right cantidart' value='1'>").appendTo(tr);
             $("<td id='precio["+ii+"]'>").html(response["precio"]).appendTo(tr);
             $("<td id='subtot["+ii+"]'>").html("<label id='subtotal["+ii+"]' class='text-success subtotal'>"+response["precio"]).appendTo(tr);
             tbody.append(tr);

             // Check if added last row
             if(ii == sel_articulos.length - 1){
                  $('#sel_articulos > tbody').append(<tr><td></td><td></td><td></td><td></td><td><label class='subtotalg'>SUB-TOTAL</label></td><td></td><td><label id='subtotalsi' class='text-success subtotalg'>Subtotal</label></td></tr>;
            }
         },
         error: function() {
             alert('Error occurs!');
         }
     });
 });

但是我会在评论中做@Scottie所说的，并在一个请求中获取所有表数据，而不是每行一个。这样可以使这更容易，因为你可以在追加所有其他附加后附加它。

Answer 2

你可以使用Deferred（和Promise）来更好地管理它，事实上jQuery中的ajax会返回一个类似Prom的接口，所以你可以尝试：

var data = {};
var promise = $ajax.({
    ...
    success: function (response) {
         // Collect your data here
         data['id'] = response['id'];
         ....
         // This means success and the done callbacks in the deferred will be executed.
    }
    ...
});

// The done call back will be executed after your ajax success callback is called
promise.done(function () {
    // now use your data to create a table
    ...
});

了解有关jQuery promise和defer的更多信息： https://api.jquery.com/promise/ https://api.jquery.com/category/deferred-object/

动态创建表并在末尾添加小计行

2 个答案: