Dinamically創建表並在末尾添加小計行

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>; 

UPDATE

根據您的意見，您需要添加它被添加的行之後。只要檢查你是否最先添加最後一行。

$.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

您可以使用延遲（和承諾）更好地管理它，確實是在jQuery的阿賈克斯將返回無極一樣的界面，所以你可以嘗試：

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的承諾，並推遲： https://api.jquery.com/promise/ https://api.jquery.com/category/deferred-object/