yếu tố Chèn từ mảng đến bảng trong jquery/js

Question

Tôi có một tập tin js gọi reservations.js, trong tập tin này, tôi có một loạt các đặt phòng, như:

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

Những gì tôi cần làm là tạo ra một bảng (trong html) với 6 colomns: Res. Số, Tên khách, Trạng thái, Ngày đến, Ngày khởi hành, Loại phòng. và chèn phần tử từ mảng vào cột phù hợp trong bảng.

Ví dụ: ReservNum ": "0.166.977", Vì vậy, số lượng 0.166.977 sẽ được trong Res col đầu tiên Số

bảng của tôi là như thế này:..

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

tôi Tôi đã cố gắng làm mọi thứ như thế này trong tệp js:

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

Nhưng nó không hoạt động. (Có lẽ bảng html của tôi là sai hoặc js, hoặc thậm chí cả hai người trong số họ).

Tôi mới tham gia js/jquery nên tôi không chắc chắn mình đang làm gì.

Answer 1

Something như dưới đây (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

Tôi không chắc liệu đây có phải là điều bạn muốn nhưng có jqGrid không. Nó có thể nhận JSON và tạo lưới.

Hoặc Bạn cũng có thể sử dụng dự án đơn giản này trên Github: Json-To-HTML-Table

Hoặc bạn cũng có thể làm của riêng bạn sử dụng jQuery sẽ làm đơn giản này.

Sau đây sẽ lấy một mảng các mảng và lưu trữ chuyển đổi chúng thành hàng và ô.

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

Bạn có thể thêm một tấm séc cho các phím bạn muốn loại trừ bằng cách thêm một cái gì đó giống như

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

vào lúc bắt đầu của CBF getJSON và thêm

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

quanh tbl_row + = dòng.

Answer 3

tôi đề nghị sử dụng phương pháp jquery.tmpl.

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

Trong JS:

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

Answer 4

Như thế này:

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