SO Help: table work from data

by SpYk3

HTML

<table>
    <thead>
        <tr><th colspan="999"><p>Data Goes Here</p></th></tr>
        <tr>
            <th>
                <p>Id</p>
            </th>
            <th>
                <p>Text</p>
            </th>
            <th>
                <p>Summary</p>
            </th>
            <th>
                <p>Complete</p>
            </th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>

CSS

table { width: 100%; }
thead p { text-align: center; }
tr {
    border-bottom: 1px solid #00F; 
    border-top: 1px solid #00F;
}
tr.complete-true { 
    background-color: #FFA; color: #F00;
    border-bottom: 1px dashed #0F0; 
    border-top: 1px dotted #0F0 !important;
}
tr:last-child th {
    background-color: #d4d4d4;
    color: #f8f8ff;
}
th { text-shadow: 1px 2px 3px #000; }
th, td {
    border-left: 1px solid #696969;
    border-right: 1px solid #696969;
    text-align: center;
}
th:first-child, td:first-child {
    border-left: none;
    width: 15px;
}
th:last-child, td:last-child {
    border-left: none;
}

JavaScript

var info = [
    {"Id":1,"Text":"Changed Location B","Summary":"PED","Complete":true},
    {"Id":2,"Text":"MA_HolyOke","Summary":"MAT","Complete":true},
    {"Id":3,"Text":"MA_NEMC","Summary":"PED","Complete":false},
    {"Id":4,"Text":"MA_South Shore","Summary":"ICU","Complete":true},
    {"Id":5,"Text":"MA_NEMC","Summary":"MAT","Complete":false},
    {"Id":6,"Text":"MA_NEMC","Summary":"MAT","Complete":false},
    {"Id":7,"Text":"MA_NEMC","Summary":"MAT","Complete":true},
    {"Id":8,"Text":"MA_NEMC","Summary":"ICU","Complete":true},
    {"Id":9,"Text":"MA_NEMC","Summary":"ICU","Complete":true},
    {"Id":10,"Text":"MA_NEMC","Summary":"MAT","Complete":false},
    {"Id":11,"Text":"MA_NEMC","Summary":"PED","Complete":true},
    {"Id":12,"Text":"MA_NEMC","Summary":"PED","Complete":false},
    {"Id":13,"Text":"MA_NEMC","Summary":"MAT","Complete":true}
    ];

$(function() {
    for (x in info) {
        console.log(x, info[x]);
        $("tbody").append(
            $("<tr />").attr({id: "row-"+x, class: "complete-"+info[x].Complete }).append(
                $("<td />").text(info[x].Id),
                $("<td />").text(info[x].Text),
                $("<td />").text(info[x].Summary),
                $("<td />").text(info[x].Complete)
            )
        );
    }
});