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

我有一个名为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将位于第一个编号Res。编号中。

我的桌子是这样的：

 
 
 
 
Res. Number
Guest Name
Status
Arrival Date
Departure Date
Room Type
 
 
 
 
 
resnum
guestname
status
arrivaldate
departuredate
roomtype
 
 
  

我不知道怎么做。 我试着在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 = $(''); $.each(props, function(i, prop) { $('').html(reservation[prop]).appendTo(tr); }); tbody.append(tr); }); 

Answer 2

像这样：

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

Answer 3

我不确定你是否想要这个，但有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 += ""+v+""; }) tbl_body += ""+tbl_row+""; }) $("#target_table_id tbody").html(tbl_body); }); 

您可以通过添加类似的内容添加对要排除的键的检查

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

在getJSON cbf的开头并添加

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

在tbl_row + =线附近。

Answer 4

我建议使用jquery.tmpl方法。

在HTML中

在JS中：

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