Hinzufügen von dynamischen Daten zu einer Tabelle

Ich habe die folgende Tabelle in meiner Anwendung. Ich habe eine Ajax-Anfrage, die die Ergebnisse holt, um in der Tabelle gezeigt zu werden. Wie fügen Sie diese Ergebnisse in die Tabelle ein, ohne die Überschrift jedes Mal zu überschreiben?Hinzufügen von dynamischen Daten zu einer Tabelle

<table id="itemList"> 
    <td>Name</td> 
    <td>Price</td> 
    <td>Quantity</td> 
    <td>Total</td> 
</table>

Dann wird die Ajax-Daten wie unten

var items = [ 
    { Name: "Apple", Price: "80", Quantity : "3", Total : "240" }, 
    { Name: "Orance", Price: "50", Quantity : "4", Total : "200" }, 
    { Name: "Banana", Price: "20", Quantity : "8", Total : "160" }, 
    { Name: "Cherry", Price: "250", Quantity : "10", Total : "2500" } 
];

Ich versuche, so etwas wie dies nun gezeigt, aber es funktioniert nicht

var rows = ""; 
$.each(items, function(){ 
    rows += "<tr><td>" + this.Name + "</td><td>" + this.Price + "</td><td>" + this.Quantity + "</td><td>" + this.Total + "</td></tr>"; 
}); 

$("#itemList").text('<tr><td>Name</td><td>Price</td><td>Quantity-</td><td>Total</td></tr>' + rows );

Quelle

2011-01-02 user559780

Sie dies, indem sie zwei Änderungen lösen können .

Sie können Sie HTML als

<table id="itemList"> 
    <thead> 
     <tr> 
      <td>Name</td> 
      <td>Price</td> 
      <td>Quantity</td> 
      <td>Total</td> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

Und Script als

var rows = ""; 
$.each(items, function(){ 
    rows += "<tr><td>" + this.Name + "</td><td>" + this.Price + "</td><td>" + this.Quantity + "</td><td>" + this.Total + "</td></tr>"; 
}); 

$(rows).appendTo("#itemList tbody");

ändern Sie here eine funktionierende Lösung finden.

Aber ein jquery-Plugin namens templates ist für diesen Zweck gebaut.

mit JQuery-Vorlagen können Sie es wie unten

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> 
     <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script> 
    </head> 
    <body> 
     <script id="itemTemplate" type="text/x-jquery-tmpl"> 
      <tr> 
       <td>${Name}</td> 
       <td>${Price}</td> 
       <td>${Quantity}</td> 
       <td>${Total}</td> 
      </tr> 
     </script> 

     <table id="itemList"> 
      <thead> 
       <tr> 
        <td>Name</td> 
        <td>Price</td> 
        <td>Quantity</td> 
        <td>Total</td> 
       </tr> 
      </thead> 
      <tbody> 
      </tbody> 
     </table> 

     <script type="text/javascript"> 
      $(document).ready(function(){ 
       var items = [ 
        { Name: "Apple", Price: "80", Quantity : "3", Total : "240" }, 
        { Name: "Orance", Price: "50", Quantity : "4", Total : "200" }, 
        { Name: "Banana", Price: "20", Quantity : "8", Total : "160" }, 
        { Name: "Cherry", Price: "250", Quantity : "10", Total : "2500" } 
       ]; 

       $("#itemTemplate").tmpl(items).appendTo("#itemList tbody"); 
      }); 
     </script> 
    </body> 
</html>

gegeben gelöst werden, aber wenn Sie weiter interessiert sind, gehen Sie tief in einigen anderen Plugins wie dataTables oder jqgrid, die mit jQuery recht gut Rasterdaten Frameworks sind.

Quelle

2011-01-02 07:30:57

+ 1Probably gut zu bedienen 'th' anstatt' td' Elemente in der 'thead' auch. Wenn ich Markup für die Anzeige erstelle, ist es bei jeder implementierten Implementierung schneller, ein Array von String-Snippets zu erstellen und dann '.join ('')' zu verwenden, um sie am Ende in eine Zeichenfolge zu verbinden, anstatt ständig String-Verkettung machen. –

Ich würde auf jeden Fall empfehlen, irgendeine Art von Vorlagenlösung zu verwenden. Tabellen von Hand zu erstellen, indem man HTML in JavaScript mischt, wird später Kopfschmerzen verursachen, und es wird wahrscheinlich der arme Kerl sein, der kommt, nachdem man lange weg ist und seinen Code pflegen muss, der letztendlich leiden wird :) – jmort253

@jmort: Absolut. –

Da Sie mit JQuery arbeiten, überprüfen Sie die JQuery Temaplate. Könnte aussehen wie wenig verschachtelt, aber es wäre ein besserer Ansatz, IMO.

Quelle

2011-01-02 07:33:09 Joker

Willkommen in 2011! Frohes neues Jahr! Wir leben in einer wundervollen und aufregenden Zeit! Nie mehr muss sich ein Webentwickler über die Details des manuellen Neubaus einer Tabelle Sorgen machen.

http://datatables.net/ wird fast jedes Problem lösen, das Sie möglicherweise begreifen könnten. Die Entwickler dieses Plugins haben an alles gedacht. Sie haben dieses Problem gelöst, sodass Sie sich nicht auf Ihre Geschäftsziele konzentrieren müssen.

Ich kann nicht genug betonen, wie mächtig dieses JQuery-Plug-in ist. Bitte werfen Sie einen Blick auf die zahlreichen Beispiele auf ihrer Website. Sie haben sogar ein Beispiel dafür, wie man eine Zeile dynamisch hinzufügt: http://datatables.net/examples/api/add_row.html.

Haftungsausschluss: Ich hatte nichts mit der Entwicklung von DataTables zu tun. Ich bin wirklich begeistert, weil es mein Leben so viel einfacher gemacht hat.

Quelle

2011-01-02 07:36:16 jmort253

Die Tabelle Struktur war falsch, müssen <tbody> und <thead>, here is a working fiddle verwenden.

<table id="itemList"> 
<thead> 
<tr> 
<th>Name</th> 
<th>Price</th> 
<th>Quantity</th> 
<th>Total</th> 
</tr> 
</thead> 
<tbody> 
</tbody>

Quelle

2011-01-02 07:36:54 Sandwich

StackOverflow soll alleine stehen. Geben Sie auf jeden Fall einen Link zu einem Live-Beispiel an, aber fügen Sie alle relevanten Markups und Codes in die Antwort selbst ein (zusammen mit einer Erläuterung dessen, was Sie getan haben). Externe Links können sich verschieben, gelöscht werden usw. –

Ja, ich stimme zu. Ich begann mit diesem Beispiel, als es 0 Antworten gab. Ich arbeite gerade weiter, bin aber ein bisschen spät dran, wenn man bedenkt, dass Arun mich geschlagen hat. Best Practice: Löschen oder Fertigstellen? – Sandwich

Hinzufügen von dynamischen Daten zu einer Tabelle

Antwort

Verwandte Themen