在jquery/js中将数组中的元素插入表中

Question

我有一个名为reservations.js的js文件,在这个文件中我有一个保留数组,如:

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" }
];

我需要做的是创建一个包含6个colomns的表(在html中):Res.号码,客人姓名,状态,到达日期,出发日期,房间类型.并将数组中的元素插入表中的匹配col中.

示例:ReservNum":"0166977",因此数字0166977将位于第一个参考编号中.

我的桌子是这样的:

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

我不知道怎么做.我试着在js文件中做这样的事情:

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

但它没有用.(也许我的html表是错的或js,甚至两者都是).

我是js/jquery的新手,所以我有点不确定我在做什么.

Answer 1

如下所示(查看工作演示):

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