追加jQuery的Ajax結果到現有的表

Question

我需要將一個jax請求結果放到現有的表，它是如何做到的？這裏是我的Ajax請求

$("input#order").click(function(){ 
    var idmenu = $("#idmenu").val(); 
    var menu = $("#idmenu :selected").text(); 
    var qty  = $("#qty").val(); 

    $.ajax({ 
     type :'POST', 
     url  :'<?php echo base_url();?>index.php/welcome/process', 
     data :'idmenu='+idmenu+'&menu='+menu+'&qty='+qty, 
     beforeSend:function(){ 
      $("#result").html('<img src="<?php echo base_url();?>assets/loading.gif"/>'); 
     }, 
     success:function(result){ 
      //result is json format 
     } 
    }); 

}); 

這裏從Ajax請求

{"itemname":"product1","qty":"3","prices":"4500"} 

這裏的JSON格式是我的表格式

<table class="list-order"> 
    <tr> 
     <th class="order">order</th> 
     <th class="qty">qty</th> 
     <th class="pice">price</th> 
    </tr> 
    //how to append ajax result here 
    <tr> 
     <td colspan="2"></td> 
     <td align="right"><input type="submit" size="25" id="process" value="Proses"/></td> 
    </tr> 
</table> 

我想追加來自像

AJAX結果

<tr> 
    <td></td> 
    <td></td> 
    <td></td> 
</tr> 

a ND未在標籤內，像

<tr> 
    <td>result is not here</td> 
</tr> 

最後的結果是這樣的一個

<table class="list-order"> 
    <tr> 
     <th class="order">order</th> 
     <th class="qty">qty</th> 
     <th class="pice">price</th> 
    </tr> 
    <!-- result look like this --> 
    <tr> 
     <td>product1</td> 
     <td>2</td> 
     </td>4500</td> 
    </tr> 
    <!-- end result--> 
    <tr> 
     <td colspan="2"></td> 
     <td align="right"><input type="submit" size="25" id="process" value="Proses"/></td> 
    </tr> 
</table> 

Answer 1

不知道你的JSON的確切格式，這是很難給出一個明確的答案。但是，假設你有一個代表你行對象的JSON數組，你需要遍歷數組，併爲每個對象執行以下操作：

• 創建一個新的<tr>元素 - var $tr = $('<tr/>');
• 對於每個項目的信息（我假設每<td>一個項目），創建一個<td>元素並設置其內容 - var $td = $('<td/>').html(x.y)（x是您當前的對象，y是對象中的字段），然後將其附加到行 - $tr.append($td);。在現有的表中的最後一行時
• 追加行 - $('.list-order tr:last').before($tr);

問題中已提供的額外信息之後，下面的代碼應該做你需要做什麼：

success: function(result) { 
    //result is json format 
    var $tr = $('<tr/>'); 
    $tr.append($('<td/>').html(result.itemname)); 
    $tr.append($('<td/>').html(result.qty)); 
    $tr.append($('<td/>').html(result.prices)); 
    $('.list-order tr:last').before($tr); 
} 

Answer 2

在你的阿賈克斯成功功能：

success:function(result){ 
      //create new tr 
      var $tr = $('<tr>'); 
      //extract value from result and put in tr 
      $tr.html(result.someVal); 
      //find first <tr> and append new tr after it 
      $('table.list-order tr:first').after($tr); 
     }