将数组元素插入到jQuery/JS表格中

Question

将数组元素插入到jQuery/JS表格中

9

我有一个名为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列：Res. Number，Guest Name，Status，Arrival Date，Departure Date，Room Type。并将数组中的元素插入到表格中相应的列中。

例如：ReservNum：“0166977”，那么数字0166977将出现在第一列Res. Number中。

我的表格如下：

<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方面很新，所以我有点不确定自己在做什么。

- shlomi

4个回答

1

我不确定这是否是你想要的，但是有 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);
});

您可以添加一个检查要排除的键的条件，例如：

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

在开始getJSON回调函数并添加

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

在 tbl_row += line 周围。

- Zaheer Ahmed

谢谢@Zaheer，这真的帮了我很多，现在它对我非常有效 :) - Sachin Shah

1

像这样：

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

- asgoth

0

我建议使用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);

- Eugeny89

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xdazz · Accepted Answer

以下是类似这样的内容（查看实际演示）：

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