您好我有一个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语句中的格式放在一起 什么是最好的方法呢?
答案 0 :(得分:2)
为什么不为每个这样的案例添加一个类。像这样的东西:
$.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;
}
答案 1 :(得分:1)
$.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;
}