追加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); 
     }