Javascript 更改整个表行的背景

我希望使表格的整行根据标记为“Status”的列的值更改颜色（背景颜色或文本颜色）。如果“状态”列中的值为“过期”，则整行的背景应更改

（编辑：将从数据库中动态提取数据）

有什么建议吗

HTML代码

奖金竞赛
价值
链接
到期
地位
现金
£500
2017年2月18日
活跃的
跑车
£5000
2017年1月18日
期满

---

提前谢谢

如果您可以更改表格的呈现方式，那么我只需将文本作为类添加。这将是最佳性能选项，不需要JavaScript，内容也不会闪烁

tr.td{
背景色：红色；
}
tr.主动td{
背景颜色：绿色；
}

奖金竞赛
价值
链接
到期
地位
现金
£500
2017年2月18日
活跃的
跑车
£5000
2017年1月18日
期满

您可以首先获取状态的索引

th

，然后使用相同的索引检查每个

td

，并检查其文本

var i=$（'th:contains（Status）'）.index（）；
$（'tr'）。每个（函数（）{
var td=$（this.find（'td'）.eq（i）；
如果（td.text（）=='Expired'）td.css（'background'，'red'）
})

奖金竞赛
价值
链接
到期
地位
现金
£500
2017年2月18日
活跃的
跑车
£5000
2017年1月18日
期满

尝试只使用CSS向tr添加一个类

tr.active > td {
  background-color: green;
}

tr.expired > td {
  background-color: red;
}

---

在您的案例中，状态列是第5列。因此，您可以执行以下操作：

$（'table tr:gt（0）'）。每个（函数（idx，ele）{
if（$（ele）.find（'td:eq（4）'）.text（）=='Expired'）{
$（ele.css（'backgroundColor'，'yellow'）；
}
})

奖金竞赛
价值
链接
到期
地位
现金
£500
2017年2月18日
活跃的
跑车
£5000
2017年1月18日
期满

如何呈现行？显示用于动态设置行的代码；jquery，或者直接通过php循环？

th

不应该是table的直接子级，我知道，也许修复它也是有意义的。否则，很多人可能认为没关系。我把这个评论放在另一个答案上（现在删除），但是你们的问题也一样。“集中在4行或代码中的低质量。硬编码代码中的“过期”字，直接更改css样式。最后，这些事情应该在表呈现期间处理。”如果我们决定将

过期的
文本更改为其他内容，或者可能添加图标，会发生什么？对，也需要修改JS代码。如果我们想改变颜色或背景会发生什么？再次更改JS！因此，在4行代码中，您硬编码了两个问题。这使得答案很糟糕。
tr.active > td {
  background-color: green;
}

tr.expired > td {
  background-color: red;
}