Append Jquery Ajax Ergebnis zu bestehenden Tabelle

Ich die ajax-Anfrage Folge zu der bestehenden Tabelle, wie kann es getan werden? hier ist mein 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
        }
    });

});

ist hier das json-format aus ajax-request

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

und hier ist meine Tabelle 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>

möchte ich anfügen das Ergebnis von ajax wie 

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

Nicht innerhalb der tag, wie

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

endgültige Ergebnis wie folgt Aussehen

<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>
InformationsquelleAutor Khairu Aqsara | 2012-07-18
  1. 5

    Ohne zu wissen, die genaue format der JSON -, ist es schwer, eine definitive Antwort geben. Jedoch, vorausgesetzt, Sie haben ein JSON-array von Objekten, die auf die Zeilen, die Sie brauchen würde, um die Iteration über das array und für jedes Objekt die folgenden:

    • Erstellen Sie eine neue <tr> element - var $tr = $('<tr/>');
    • Für jedes Element von Informationen (ich nehme an, ein Element pro <td>), erstellen Sie eine <td> element, und legen die Inhalte var $td = $('<td/>').html(x.y) (x ist Ihre aktuelle Objekt y ist ein Feld in dem Objekt), dann hängen Sie an der Reihe $tr.append($td);.
    • Fügen Sie die Zeile vor der letzten Zeile der bestehenden Tabelle - $('.list-order tr:last').before($tr);

    Folgende zusätzliche Informationen in die Frage, der folgende code sollte das tun, was Sie tun müssen:

    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);
}
    • ich habe edied meine Frage, json-format auch da
    • Kann man auch genau, was Sie wollen würde der resultierende HTML-Code Aussehen? Eine einzelne <td> oder eine <td> pro Stück von Informationen?
    • Ich bearbeitet meine Frage Anthony
    • Ich habe bearbeitet Sie meine Antwort auf einige spezifische code, die sollten Sie geben, was Sie wollen.
    • Dank Anthony, es funktioniert Super
    • $('.Liste-um tr:last').bevor($tr); kann geändert werden, um $('#Liste-um tr:last').bevor($tr);
    • Nein, es kann nicht, die HTML verwendet eine Klasse, die nicht eine id; die beiden sind nicht austauschbar. Man könnte (wahrscheinlich) ändern Sie die HTML -, eine id zu verwenden und ändern Sie den Selektor, obwohl.
    • Das ist was für mich gearbeitet.

    InformationsquelleAutor Anthony Grist
  2. 0

    In Ihrer ajax-success-Funktion:

    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);
         }
    • ich bearbeitet meine Frage, jetzt json-format auch da
    InformationsquelleAutor Tomer
Schreibe einen Kommentar