我有这样的问题,如何更改每一行的背景颜色?
例如我有桌子
为此,我要制作其他颜色,例如红色。
HTML:
<table>
<thead>
<tr>
<th></th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
</tr>
</thead>
<tbody class="tableData">
</tbody>
</table>
JS:
var lpmsData = [
{ item: "111000355B", order: "9999999999", actual: "403", target: "404", defects: "1", efficiency: 89, pefomance: 78, oee: "N/A", startTime: "06:45:44" },
{ item: "102211549B", order: "8888888887", actual: "504", target: "366", defects: "123", efficiency: 125, pefomance: 96, oee: "N/A", startTime: "05:35:64" }
];
var timeShedule = [
{ firstShift: ["05:45 - 07:00", "07:00 - 08:00", "08:00 - 09:00", "09:00 - 10:00", "10:00 - 11:00", "11:00 - 12:00", "12:00 - 13:00", "13:00 - 14:00", "14:00 - 14:45",]}
];
function buildTable() {
$.each(lpmsData, function (i, data) {
var categoryBuild = '<tr><td width="150">' + timeShedule[0].firstShift[i] + '</td><td>' + data.item + '</td><td>' + data.actual + '</td><td>' + data.target + '</td><td>' + data.defects + '</td><td>' + data.efficiency + '</td><td>' + data.pefomance + '</td><td>' + data.oee + '</td></tr>';
if (data.efficiency <= 50) {
$(this).css("background-color", "blue");
}
$('.tableData').append(categoryBuild);
});
}
我尝试使用这种类型的代码,但已收到:
所以知道怎么做吗?
答案 0 :(得分:1)
您可以在if
方法之后移动append
语句:
$('.tableData').append(categoryBuild);
if (data.efficiency <= 50) {
$('.tableData tr:last').css("background-color", "blue");
}
演示
var lpmsData = [{
item: "111000355B",
order: "9999999999",
actual: "403",
target: "404",
defects: "1",
efficiency: 89,
pefomance: 78,
oee: "N/A",
startTime: "06:45:44"
},
{
item: "102211549B",
order: "8888888887",
actual: "504",
target: "366",
defects: "123",
efficiency: 125,
pefomance: 96,
oee: "N/A",
startTime: "05:35:64"
},
{
item: "112255458C",
order: "7777777777",
actual: "777",
target: "555",
defects: "1",
efficiency: 155,
pefomance: 102,
oee: "N/A",
startTime: "07:44:44"
},
{
item: "111225445G",
order: "6666666666",
actual: "403",
target: "404",
defects: "1",
efficiency: 34,
pefomance: 78,
oee: "N/A",
startTime: "11:55:09"
},
{
item: "584844455A",
order: "5555555555",
actual: "905",
target: "905",
defects: "1",
efficiency: 100,
pefomance: 78,
oee: "N/A",
startTime: "12:45:44"
},
{
item: "111000354B",
order: "9999999999",
actual: "403",
target: "404",
defects: "1",
efficiency: 89,
pefomance: 78,
oee: "N/A",
startTime: "13:45:44"
},
{
item: "102253212B",
order: "8888888887",
actual: "504",
target: "366",
defects: "123",
efficiency: 125,
pefomance: 96,
oee: "N/A",
startTime: "13:55:44"
},
{
item: "112241678C",
order: "7777777777",
actual: "777",
target: "555",
defects: "1",
efficiency: 50,
pefomance: 102,
oee: "N/A",
startTime: "14:15:44"
},
{
item: "111225456G",
order: "6666666666",
actual: "403",
target: "404",
defects: "1",
efficiency: 89,
pefomance: 78,
oee: "N/A",
startTime: "14:22:46"
},
{
item: "584844000A",
order: "5555555555",
actual: "905",
target: "905",
defects: "1",
efficiency: 100,
pefomance: 78,
oee: "N/A",
startTime: "14:36:13"
}
];
var timeShedule = [{
firstShift: ["05:45 - 07:00", "07:00 - 08:00", "08:00 - 09:00", "09:00 - 10:00", "10:00 - 11:00", "11:00 - 12:00", "12:00 - 13:00", "13:00 - 14:00", "14:00 - 14:45", ]
}];
buildTable()
function buildTable() {
$.each(lpmsData, function(i, data) {
var categoryBuild = '<tr><td width="150">' + timeShedule[0].firstShift[i] + '</td><td>' + data.item + '</td><td>' + data.actual + '</td><td>' + data.target + '</td><td>' + data.defects + '</td><td>' + data.efficiency + '</td><td>' + data.pefomance + '</td><td>' + data.oee + '</td></tr>';
if (data.efficiency <= 50) {
categoryBuild = $($.parseHTML(categoryBuild))
categoryBuild.css("background-color", "blue");
}
$('.tableData').append(categoryBuild);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th></th>
<th>Item number</th>
<th>Actual</th>
<th>Target</th>
<th>Defects</th>
<th>Efficiency</th>
<th>Performance</th>
<th>OEE</th>
</tr>
</thead>
<tbody class="tableData">
</tbody>
</table>
另一种方法是这样:
if (data.efficiency <= 50) {
categoryBuild = $($.parseHTML(categoryBuild))
categoryBuild.css("background-color", "blue");
}
答案 1 :(得分:1)
您可以使用模板文字并将类添加到tr
。<tr class="${data.efficiency<=50?'blue':''}">
正在检查data.efficiency的值是否小于或等于50。如果是,则将类添加到{ {1}}
tr
var lpmsData = [{
item: "111000355B",
order: "9999999999",
actual: "403",
target: "404",
defects: "1",
efficiency: 89,
pefomance: 78,
oee: "N/A",
startTime: "06:45:44"
},
{
item: "102211549B",
order: "8888888887",
actual: "504",
target: "366",
defects: "123",
efficiency: 125,
pefomance: 96,
oee: "N/A",
startTime: "05:35:64"
},
{
item: "112255458C",
order: "7777777777",
actual: "777",
target: "555",
defects: "1",
efficiency: 155,
pefomance: 102,
oee: "N/A",
startTime: "07:44:44"
},
{
item: "111225445G",
order: "6666666666",
actual: "403",
target: "404",
defects: "1",
efficiency: 34,
pefomance: 78,
oee: "N/A",
startTime: "11:55:09"
},
{
item: "584844455A",
order: "5555555555",
actual: "905",
target: "905",
defects: "1",
efficiency: 100,
pefomance: 78,
oee: "N/A",
startTime: "12:45:44"
},
{
item: "111000354B",
order: "9999999999",
actual: "403",
target: "404",
defects: "1",
efficiency: 89,
pefomance: 78,
oee: "N/A",
startTime: "13:45:44"
},
{
item: "102253212B",
order: "8888888887",
actual: "504",
target: "366",
defects: "123",
efficiency: 125,
pefomance: 96,
oee: "N/A",
startTime: "13:55:44"
},
{
item: "112241678C",
order: "7777777777",
actual: "777",
target: "555",
defects: "1",
efficiency: 50,
pefomance: 102,
oee: "N/A",
startTime: "14:15:44"
},
{
item: "111225456G",
order: "6666666666",
actual: "403",
target: "404",
defects: "1",
efficiency: 89,
pefomance: 78,
oee: "N/A",
startTime: "14:22:46"
},
{
item: "584844000A",
order: "5555555555",
actual: "905",
target: "905",
defects: "1",
efficiency: 100,
pefomance: 78,
oee: "N/A",
startTime: "14:36:13"
}
];
var timeShedule = [{
firstShift: ["05:45 - 07:00", "07:00 - 08:00", "08:00 - 09:00", "09:00 - 10:00", "10:00 - 11:00", "11:00 - 12:00", "12:00 - 13:00", "13:00 - 14:00", "14:00 - 14:45", ]
}];
function buildTable() {
$.each(lpmsData, function(i, data) {
var categoryBuild = `<tr class=${data.efficiency<=50?"blue":""}>
<td width="150">${timeShedule[0].firstShift[i]}</td>
<td>${data.item}</td>
<td>${data.actual}</td>
<td>${data.target}</td>
<td>${data.defects}</td>
<td>${data.efficiency}</td>
<td>${data.pefomance}</td>
<td>$data.oee}</td>
</tr>`;
$('.tableData').append(categoryBuild);
});
}
buildTable()
.blue {
background: blue;
color: white;
}
答案 2 :(得分:1)
为什么不只是纯CSS?
tbody.tableData tr:nth-child(even) {background: red;}