Javascript / jQuery根據值更改表的單元格

Question

嗨，我有一個javascript函數，它接收JSON文件的內容並將其放入表中，這是代碼。

$.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);
        });
    });

但是我需要通過if語句進行某種格式設置，例如

通常情況下，我會使用一些糟糕的If語句。

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

但是，我正在努力尋找將現有功能與創建表的功能以及If語句的格式放在一起的最佳方法，這是最好的方法？

Answer 1

為什么不為每個這種情況添加一個類。 像這樣的東西：

       $.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);
                });
            });

然后向您的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);
                    });
                });

使用該值將類添加到您的td中。 如果您要確定的值，則可以使用所需的CSS屬性為其創建css選擇器。

假設您具有op的值作為someOpValue，則可以像下面那樣寫css。

td.op.someOpValue{
    background : red;
}