Insert Elemente aus Array-Tabelle in jquery/js

Question

ich eine js-Datei reservations.js genannt, in dieser Datei ich eine Reihe von Reservierungen haben, wie:

var reservations = [ 
    { "HotelId": "01", "HotelName": "SPA", "ReservNum": "0166977", "Guest Name": "Jonny", "Room": null, "Type": "SUIT", "Rooms": "1", "Board": "BB", "Status": "IH", "Pax": "2,0,0,0", "Arrival": "07/08/12", "Departure": "09/08/12", "AgentDesc": "FIT", "AgentCode": "FIT", "Group": null, "Balance": "0", "Requests": "", "Remarks": null, "Fit/Group": "FIT", "ReturnGuestName": "", "StatusColor": "LightCoral" }, 
    { "HotelId": "01", "HotelName": "SPA", "ReservNum": "H000192", "Guest Name": null, "Room": null, "Type": "Folio", "Rooms": "0", "Board": "", "Status": "IH", "Pax": "0,0,0,0", "Arrival": "07/08/12", "Departure": "10/09/12", "AgentDesc": "movies", "AgentCode": "001", "Group": null, "Balance": "0", "Requests": "", "Remarks": "", "Fit/Group": "FIT", "ReturnGuestName": "", "StatusColor": "LightCoral" } 
]; 

Was ich tun müssen, um erstellen eine Tabelle (in html) mit 6 Spalten: Res. Anzahl, Gastname, Status, Ankunftsdatum, Abreisedatum, Zimmertyp. und fügen Sie das Element aus dem Array in die übereinstimmende Spalte in der Tabelle ein.

Beispiel: ReservNum ": "0166977", also die Zahl 0.166.977 in den ersten Spalt Res seine Anzahl

Mein Tisch ist wie folgt:..

<table id="reservations"> 
     <thead> 
      <tr> 
       <th>Res. Number</th><th>Guest Name</th><th>Status</th><th>Arrival Date</th><th>Departure Date</th><th>Room Type</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>resnum</td><td>guestname</td><td>status</td><td>arrivaldate</td><td>departuredate</td><td>roomtype</td> 
      </tr> 
     </tbody> 
    </table> 

I weiß nicht, was, wie es zu tun ich habe versuchen somthing wie dies in der JS-Datei zu tun.

$('#reservations tr').each(function (i) { 
    $(this).find('td').html(reservations[i]); 
}); 

Aber es funktioniert nicht. (Vielleicht ist meine HTML-Tabelle falsch oder die js oder sogar beide).

Ich bin neu in js/jquery, also bin ich ein wenig unsicher, was ich mache.

Answer 1

So etwas wie unten (Check the working demo):

var tbody = $('#reservations tbody'), 
    props = ["ReservNum", "Guest Name", "Status", "Arrival", "Departure", "Type"]; 
$.each(reservations, function(i, reservation) { 
    var tr = $('<tr>'); 
    $.each(props, function(i, prop) { 
    $('<td>').html(reservation[prop]).appendTo(tr); 
    }); 
    tbody.append(tr); 
}); 

Answer 2

Ich bin mir nicht sicher, ob das ist, was Sie wollen, aber es gibt jqGrid. Es kann JSON empfangen und ein Gitter erstellen.

Oder Sie können auch dieses einfache Projekt auf Github verwenden: Json-To-HTML-Table

Oder Sie können auch Ihre eigenen mit jQuery machen diese einfacher machen.

Die folgenden werden ein Array von Arrays und speichern sie in Zeilen und Zellen konvertieren.

$.getJSON(url , function(data) { 
    var tbl_body = ""; 
    $.each(data, function() { 
     var tbl_row = ""; 
     $.each(this, function(k , v) { 
      tbl_row += "<td>"+v+"</td>"; 
     }) 
     tbl_body += "<tr>"+tbl_row+"</tr>";     
    }) 
    $("#target_table_id tbody").html(tbl_body); 
}); 

Sie einen Scheck für die Schlüssel hinzufügen, könnten Sie wie durch Zugabe von etwas ausschließen möchten

var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true }; 

zu Beginn des getJSON CBF und das Hinzufügen von

if ((k in expected_keys) && expected_keys[k]) { 
... 
} 

um die tbl_row + = Linie.

Answer 3

I jquery.tmpl Methode empfehlen die Verwendung.

In HTML

<script id="template-table" type="text/x-jquery-tmpl"> 
     <tr> 
      <th>Res. Number</th><th>Guest Name</th><th>Status</th><th>${Arrival}</th><th>${Departure}</th><th>Room Type</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>${ReservNum}</td><td>${Guest_Name}</td><td>${Status}</td><td>arrivaldate</td><td>departuredate</td><td>${Type}</td> 
     </tr> 
    </tbody> 
</script> 

In JS:

var reservations = [...]; 
$("#template-table").tmpl(reservations); 

Answer 4

So:

$('#reservations tr').each(function (i) { 
    var td = $(this).find('td'); 
    td.html(reservations[i]['ReservNum']); 
    td = td.next(); 
    td.html(reservations[i]['Guest Name']); 
    td = td.next(); 
    td.html(reservations[i]['Status']); 
    td = td.next(); 
    td.html(reservations[i]['Arrival']); 
    td = td.next(); 
    td.html(reservations[i]['Departure']); 
    td = td.next(); 
    td.html(reservations[i]['Type']); 
    td = td.next(); 
    td.html(reservations[i]['Rooms']); 
    td = td.next(); 
    td.html(reservations[i]['Board']); 
});