Javascript 将元素从数组插入到 jquery/js 中的表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14009810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert elements from array to table in jquery/js
提问by shlomi
I have a js file called reservations.js, in this file I have an array of reservations, like:
我有一个名为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" }
];
What I need to do is to create a table(in html) with 6 colomns: Res. Number, Guest Name, Status, Arrival Date, Departure Date, Room Type. and insert the element from the array into the matching col in the table.
我需要做的是创建一个带有 6 列的表格（以 html 格式）：Res. 号码、客人姓名、状态、到达日期、出发日期、房间类型。并将数组中的元素插入到表中匹配的列中。
Example: ReservNum": "0166977", So the number 0166977 will be in the first col Res. Number.
示例：ReservNum": "0166977"，因此编号 0166977 将在第一列 Res. Number 中。
My table is like this:
我的表是这样的：
<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 don't know what how to do it. I have try to do somthing like this in the js file:
我不知道该怎么做。我尝试在 js 文件中做这样的事情：
$('#reservations tr').each(function (i) {
$(this).find('td').html(reservations[i]);
});
But it is not working. (Maybe my html table is wrong or the js, or even both of them).
但它不起作用。（也许我的 html 表错误或 js 错误，甚至两者都有）。
I'm new in js/jquery so I'm a little unsure what I'm doing.
我是 js/jquery 的新手，所以我有点不确定我在做什么。
回答by xdazz
Something like below (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);
});
回答by asgoth
Like this:
像这样：
$('#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']);
});
回答by Zaheer Ahmed
I'm not sure if is this that you want but there is jqGrid. It can receive JSON and make a grid.
我不确定这是否是您想要的，但有jqGrid。它可以接收 JSON 并制作网格。
Or You can also use this simple project on Github : Json-To-HTML-Table
或者你也可以在 Github 上使用这个简单的项目：Json-To-HTML-Table
Or you can also make your own using jQuery will make this simpler.
或者您也可以使用 jQuery 制作自己的作品，这将使这更简单。
The following will take an array of arrays and store convert them into rows and cells.
以下将采用数组数组并将它们存储转换为行和单元格。
$.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);
});
You could add a check for the keys you want to exclude by adding something like
您可以通过添加类似的内容来检查要排除的键
var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };
at the start of the getJSON cbf and adding
在 getJSON cbf 的开头并添加
if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}
around the tbl_row += line.
围绕 tbl_row += 线。
回答by Eugeny89
I suggest using jquery.tmplmethod.
我建议使用jquery.tmpl方法。
In HTML
在 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:
在JS中：
var reservations = [...];
$("#template-table").tmpl(reservations);
