JSON data into Table

by Anand Jee

HTML

<h1>JSON data into Table</h1>

<hr>
<table id="tblhotelAmenities" class="table">
    <th>Amenities</th>
    <th>Yes/No</th>
    <th>Paid/Free</th>
</table>
<input type="button" id="btngetValue" class="btn btn-danger" value="Get Selected Value">

CSS

body {
    font-family: calibri;
    font-size: 12px;
}
h1 {
    text-align:center;
    font-size:15px;
    padding:0;
}
table#tblhotelAmenities {
    border:1px solid #ddd;
    border-collapse:collapse;
}
table#tblhotelAmenities tr td, table tr th {
    border:1px solid #ddd;
    padding:2px 5px;
}

JavaScript

//JSON data into Table

var json = [{
    "Amenities": "Accessible bathroom"
}, {
    "Amenities": "Accessible path of travel"
}, {
    "Amenities": "Accessible path of travel"
}, {
    "Amenities": "Meeting Rooms"
}, {
    "Amenities": "Wi-Fi - Hi Speed Internet"
}, {
    "Amenities": "ATM"
}, {
    "Amenities": "Boarding for Drivers"
}, {
    "Amenities": "In-room accessibility"
}];

$.each(json, function (i, item) {
    var html = "<tr><td><label class='lblAmenities'>" + json[i].Amenities + "</label></td>";
    html += "<td><INPUT type='checkbox' name='chkYesNo'/></td><td><INPUT type='checkbox' name='chkPaidFree'/></td><</tr>";
    $('#tblhotelAmenities').append(html);
});

$("#btngetValue").click(function () {
    var values = $("#tblhotelAmenities input[name=chkYesNo]:checked").map(function () {
        var selectedValue = $(this).closest("tr").find(".lblAmenities").text() + "-" + $(this).closest("tr").find("input[name=chkPaidFree]").is(':checked')
        return selectedValue;
    }).get();
    alert(values);
});