सम्मिलित 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" } 
]; 

मैं क्या करने की जरूरत है बनाने के लिए है 6 colomns के साथ एक टेबल (एचटीएमएल में): Res। संख्या, अतिथि का नाम, स्थिति, आगमन की तारीख, प्रस्थान की तारीख, कक्ष का प्रकार। और तालिका में मिलान करने वाले कॉल में सरणी से तत्व डालें।

उदाहरण: ReservNum ":" 0,166,977 ", तो संख्या 0,166,977 पहले col रेस में हो जाएगा संख्या

मेरे तालिका इस तरह है:।।

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

मैं यह नहीं पता कि यह कैसे करें। मैंने जेएस फ़ाइल में ऐसा कुछ करने की कोशिश की है:

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

लेकिन यह काम नहीं कर रहा है। (शायद मेरी एचटीएमएल टेबल गलत है या जेएस, या यहां तक ​​कि दोनों)।

मैं जेएस/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 }; 

कुछ जोड़ने और tbl_row आसपास

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

जोड़कर चाबियाँ आप छोड़ना चाहते हैं के लिए एक जाँच जोड़ सकता है + = रेखा।

Answer 3

मैं jquery.tmpl विधि का उपयोग कर सुझाव देते हैं।

एचटीएमएल

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

में

जे एस में:

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