jQuery如何更改行的背景色，将每行分开？

Question

我有这样的问题，如何更改每行的背景颜色？

例如我有桌子

为此，我要制作另一种颜色， 例如红色 。

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

}

我尝试使用这种类型的代码，但已收录：

那么有什么想法怎么做？

Answer 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");
}

Answer 2

您可以使用模板文字并将类添加到tr 。 <tr class="${data.efficiency<=50?'blue':''}">正在检查data.efficiency的值是否小于或等于50。如果是，则将一个类添加到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; } 

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

Answer 3

为什么不只是纯CSS？

 tbody.tableData tr:nth-child(even) {background: red;}