Javascript / jQuery changing cell of a table based on the value

Question

Hi i have a javascript function that take the contents of a JSON file and the puts it in to a table, here is the code.

$.getJSON("People.json",
    function(data) {
        $.each(data.People, function(i, PersonObj) {
            var Person = PersonObj[Object.keys(PersonObj)[0]];
            content = '<tr>';
            content += '<tbody>';
            content += '<td>' + Person.Op + ' </td>';
            content += '<td>' + Person.Name + ' </td>';
            content += '<td>' + Person.WorkHours + ' </td>';
            content += '<td>' + Person.Start + ' </td>';
            content += '<td>' + Person.End + ' </td>';
            content += '<td>' + Person.Clock + ' </td>';
            content += '<td>' + Person.OFF + ' </td>';
            content += '<td>' + Person.ON + ' </td>';
            content += '<td>' + Person.OUT + ' </td>';
            content += '</tr>';
            content += '</tbody>';
            content += '<p>';
            $(content).appendTo("tbody");
            console.log(Person);
        });
    });

However what i need is to some formatting via if statements so for example

normally i would use something like the badly put together bunch of If statements.

if (Person.clock !== false) {
document.getElementById('the cell where Person.Op is placed').style.backgroundColor = 'lime';
}
if (Person.Off !== false) {
document.getElementById('the cell where Person.Op is placed').style.backgroundColor = 'red';
}
if (Person.on !== false) {
document.getElementById('the cell where Person.Op is placed').style.backgroundColor = 'lime';
}
if (Person.out !== false) {
document.getElementById('the cell where Person.Op is placed').style.backgroundColor = 'red';
}

However i am struggling to find the best way of putting what i already have with the function for creating the table and putting the formatting from the If statements together what would be the best way to do this?

Answer 1

Why not add a class to each such case. something like this:

       $.getJSON("People.json",
            function(data) {
                $.each(data.People, function(i, PersonObj) {
                    var Person = PersonObj[Object.keys(PersonObj)[0]];
                    content = '<tr>';
                    content += '<td>' + Person.Op + ' </td>';
                    content += '<td>' + Person.Name + ' </td>';
                    content += '<td>' + Person.WorkHours + ' </td>';
                    content += '<td>' + Person.Start + ' </td>';
                    content += '<td>' + Person.End + ' </td>';
                    content += '<td class="'+(Person.clock? 'hasClock' : '') +'">' + Person.Clock + ' </td>';
                    content += '<td>' + Person.OFF + ' </td>';
                    content += '<td>' + Person.ON + ' </td>';
                    content += '<td>' + Person.OUT + ' </td>';
                    content += '</tr>';
                    $(content).appendTo("tbody");
                    console.log(Person);
                });
            });

and then add a class to your css:

.hasClock{ 
    background-color :lime;
}

Answer 2

$.getJSON("People.json",
                function(data) {
                    $.each(data.People, function(i, PersonObj) {
                        var Person = PersonObj[Object.keys(PersonObj)[0]];
                        content = '<tr>';
                        content += '<tbody>';
                        content += '<td class="op ' + Person.Op + '">' + Person.Op + ' </td>';
                        content += '<td>' + Person.Name + ' </td>';
                        content += '<td>' + Person.WorkHours + ' </td>';
                        content += '<td>' + Person.Start + ' </td>';
                        content += '<td>' + Person.End + ' </td>';
                        content += '<td>' + Person.Clock + ' </td>';
                        content += '<td>' + Person.OFF + ' </td>';
                        content += '<td>' + Person.ON + ' </td>';
                        content += '<td>' + Person.OUT + ' </td>';
                        content += '</tr>';
                        content += '</tbody>';
                        content += '<p>';
                        $(content).appendTo("tbody");
                        console.log(Person);
                    });
                });

Add class to your td's with the value. If you have definite values coming up, then you can create css selectors for that with the CSS properties you want.

Suppose you had value of op as someOpValue You could write your css like foloowing.

td.op.someOpValue{
    background : red;
}