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

Javascript / jQuery根据值更改表的单元格

2 个答案: