jQuery - Bad Practice - Base

by graphicsxp

HTML

<table>
    <thead>
        <th>Selected</th>
        <th>Garantie</th>
        <th>Price</th>
    </thead>
    <tbody id="tblCovers"></tbody>
</table>

CSS

table {
    border: solid 1px black;
}
td {
    border: solid 1px black;
}

JavaScript

var data = {
    "Covers": [{
        "code": 23,
            "isSelected": false,
            "label": "RC",
            "isMandatory": false,
            "price": 120
    }, {
        "code": 76,
            "isSelected": true,
            "label": "DM",
            "isMandatory": false,
            "price": 150
    }]
};

$(function () {
    $.each(data.Covers, function () {
        var selected = "<input type='checkbox' class='selectCover' checked='" + this.isSelected + "' />";
        var price = "<span class='price'>" + this.price + "</span>";

        $("#tblCovers").append("<tr id='" + this.code + "'><td>" + this.code + selected + "</td><td><input type='text' value='" + this.label + "' /></td><td>" + price + "</td></tr>");
    });

    $(".selectCover").click('toggle', function () {
        if (!this.checked) {
            $(this).closest('tr').find('.price').text('N/A');
        } else {
            var id = $(this).closest('tr').attr('id');
            var res = $.grep(data.Covers, function (item) {
                return item.code == id;
            });
            if (res) {
                $(this).closest('tr').find('.price').text(res[0].price);
            } else {
                alert('element not found');
            }
        }
    });
});