如何在JavaScript中根据条件为表格内JSON数据设置红/绿颜色

Hey，我看到你遇到的表格条件着色问题了，咱们先把代码里的小bug修掉，再实现你要的颜色逻辑～

首先你代码里有个变量名不一致的问题：你定义的学生数据数组是myBooks，但后续循环遍历用的却是myReport，这会直接导致函数运行报错，得先把这个统一成同一个变量名。

接下来，咱们来实现条件颜色的功能，思路很简单：

• 先在CSS里定义两个文本颜色类，分别对应红色（低于40%的情况）和绿色（其他情况）
• 在生成表格单元格的时候，判断当前列是否是MARKS、PERCENTAGE、RESULT中的一个，再结合学生的百分比数值，给对应单元格添加对应的颜色类

下面是完整的修正代码：

<!DOCTYPE html>
<html>
<head>
<title>Spring Session Report</title>
<style>
table, th, td {
margin:10px 0;
border:solid 1px #333;
padding:2px 4px;
font:15px Verdana;
text-align: center;
}
th {
font-weight:bold;
background-color:#b1babf;
color: black;
font-size: 15px;
text-align: center;
margin: auto;
padding: 8px;
height: 5px;
width: 20%;
}
/* 新增颜色类 */
.red-text {
    color: red;
}
.green-text {
    color: green;
}
</style>
</head>
<body>
<input type="button" onclick="CreateTableFromJSON()" value="Generate Semester Report" />
<div id="showData"></div>
</body>
<script>
function CreateTableFromJSON() {
// 统一变量名为myBooks
var myBooks = [{"NAME":"Rick","SEX":"M","MARKS":"32/100","PERCENTAGE":"32%","RESULT":"F"},{"NAME":"Rose","SEX":"F","MARKS":"43/45","PERCENTAGE":"95.56%","RESULT":"P"},{"NAME":"Alex","SEX":"M","MARKS":"54/75","PERCENTAGE":"72%","RESULT":"P"},{"NAME":"Adam","SEX":"M","MARKS":"88/96","PERCENTAGE":"91.67%","RESULT":"P"}]
var col = [];
for (var i = 0; i < myBooks.length; i++) {
for (var key in myBooks[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
var table = document.createElement("table");
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
}
for (var i = 0; i < myBooks.length; i++) {
tr = table.insertRow(-1);
// 提取当前学生的百分比数值（去掉%转成数字）
var percentage = parseFloat(myBooks[i].PERCENTAGE);
// 定义需要着色的列名
var targetColumns = ["MARKS", "PERCENTAGE", "RESULT"];
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = myBooks[i][col[j]];
// 判断当前列是否是目标列，再根据百分比设置颜色类
if (targetColumns.includes(col[j])) {
    if (percentage < 40) {
        tabCell.classList.add("red-text");
    } else {
        tabCell.classList.add("green-text");
    }
}
}
}
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
</script>
</html>

关键逻辑说明： #

1. CSS颜色类：新增了.red-text和.green-text两个类，分别设置文本为红色和绿色，这样后续可以通过给单元格添加类来实现着色，比直接写内联样式更灵活易维护。
2. 百分比提取：用parseFloat(myBooks[i].PERCENTAGE)把带%的字符串转成数字，方便做数值比较。
3. 条件判断：先判断当前列是否属于需要着色的三列，再根据百分比是否低于40，给单元格添加对应的颜色类。

这样运行代码后，Rick的MARKS、PERCENTAGE、RESULT列就会显示红色，其他学生的对应列显示绿色，完全符合你的需求～

内容的提问来源于stack exchange，提问作者dash