插入元素表中的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" } 
]; 

我需要做的是创造一个表格（在html中）有6个colomns：Res。号码，客人姓名，身份，到达日期，出发日期，房间类型。 并将数组中的元素插入表中的匹配列。

举例：ReservNum“： ”0166977“，于是数0166977将在 第一山坳RES数

我的表是这样的：。

<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

类似下面（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

我不确定是否这是你想要的，但有jqGrid。它可以接收JSON并创建网格。

，或者您也可以使用这个简单的项目在Github上：Json-To-HTML-Table

或者你也可以使用jQuery将使这个简单的让你自己。

以下内容将采用数组和阵列将它们转换为行和单元格。

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

你可以通过在的getJSON CBF开始添加类似

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

并添加

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

围绕tbl_row添加的支票要排除的按键+ =行。

Answer 3

我建议使用jquery.tmpl方法。

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

在JS：

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

Answer 4

像这样：

$('#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']); 
});