如何根据单元格值设置HTML表格行的颜色？

实现思路 #

通过动态给表格行添加CSS类，结合样式规则区分不同状态的行：

• 当Status为Accepted时，行添加status-accepted类，显示浅绿色背景
• 当Status不为Accepted时，行添加status-rejected类，显示浅红色背景

修改后的完整代码 #

HTML（无需改动）

<div class="container">
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody id="data">
  </tbody>
</table>
</div>

CSS（新增状态行样式）

table {
  border-collapse: collapse;
}
td, th {
  border: thin solid black;
  padding: 0.2rem;
}
/* 状态行背景色 */
.status-accepted {
  background-color: #d4edda;
}
.status-rejected {
  background-color: #f8d7da;
}

JavaScript（添加状态判断逻辑）

const url = "https://dummyjson.com/c/38f5-f39a-411e-aeb0";

fetch(url).then(
  res => {
    res.json().then(
      data => {
        if (data.data.length > 0) {
          var temp = "";
          data.data.forEach((itemData) => {
            // 根据Status值选择行样式类
            const rowClass = itemData.Status === "Accepted" ? "status-accepted" : "status-rejected";
            temp += `<tr class="${rowClass}">`;
            temp += `<td>${itemData.Name}</td>`;
            temp += `<td>${itemData.Address}</td>`;
            temp += `<td>${itemData.Status}</td></tr>`;
          });
          document.getElementById('data').innerHTML = temp;
        }
      }
    )
  }
)

关键改动说明 #

1. CSS部分：新增两个类，用柔和的红绿色调定义不同状态行的背景色，提升可读性
2. JavaScript部分：生成表格行时，通过三元运算符判断Status的值，动态给<tr>元素添加对应样式类
3. 改用ES6模板字符串拼接HTML，代码更简洁易维护

内容的提问来源于stack exchange，提问作者Shubham Singh Chauhan