Question

I need to place ajax request result to existing table, how can it be done? here is my ajax request

$("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
        }
    });

});

here is the json format from ajax request

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

and here is my table format

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

i want to append the result from ajax like

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

and Not inside the tag, like

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

final result look like this one

<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

Without knowing the exact format of your JSON, it’s hard to give a definitive answer. However, assuming you have a JSON array of objects that represent your rows, you’d need to iterate over that array and for each object do the following:

• Create a new <tr> element – var $tr = $('<tr/>');
• For each item of information (I assume one item per <td>), create a <td> element and set its content – var $td = $('<td/>').html(x.y) (x is your current object, y is a field in the object) then append it to the row – $tr.append($td);.
• Append the row before the last row in the existing table – $('.list-order tr:last').before($tr);

Following from the additional information provided in the question, the following code should do what you need to do:

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