Javascript 基于列值的颜色表行

我有一个html表，我想根据该行第一列中的值为行着色。如果该值为“已确认”，我希望将该行涂成绿色，如果为“未确认”，我希望将该行涂成红色

我使用的JS是：

$(function(){
    $("tr").each(function(){
      var col_val = $(this).find("td:eq(1)").text();
      if (col_val == "CONFIRMED"){
        $(this).addClass('selected');  //the selected class colors the row green//
      } else {
        $(this).addClass('bad');
      }
    });
});

CSS如下所示：

.selected {
background-color: green;
  color: #FFF;
}

.bad {
  background-color: red;
  color: #FFF;
}

<div class="table-responsive" style="margin-left: 15%; margin-right: 15%; overflow:auto;">
  {{ datatable | safe }}
</div>

html表由my Django视图中的pandas数据框生成，并按如下方式传入：

.selected {
background-color: green;
  color: #FFF;
}

.bad {
  background-color: red;
  color: #FFF;
}

<div class="table-responsive" style="margin-left: 15%; margin-right: 15%; overflow:auto;">
  {{ datatable | safe }}
</div>

{{datatable | safe}}

问题是它把我所有的行都染成了红色。有人能告诉我我做错了什么吗？

既然您使用了

==“confirated”

请确保它确实是：大写，并且HTML中没有前导空格或结尾空格

“confirated”

或

“confirated”

您显示的代码将为

着色。选中的
整行
：eq（1）
TD具有“已确认”内容：


$（函数（）{
$（“tr”）。每个（函数（）{
var col_val=$（this.find（“td:eq（1）”）.text（）；
如果（列值=“已确认”）{
$（this）.addClass（'selected'）；//所选类将行涂成绿色//
}否则{
$（this.addClass（'bad'）；
}
});
});
。已选定{
背景颜色：绿色；
}
.不好{
背景色：红色；
}

1确认
2未确认
如果要查找要使用的行中的第一列：

var col_val = $(this).find("td:eq(0)").text();

将
td:eq（1）
更改为
td:eq（0）
要查找行中的第一列，您需要使用
第一个子项
选择器。您可以使用
each
函数迭代每个第一列

然后查看文本，然后将适当的类添加到列的父级（
tr
）


tr[数据统计=“已确认”]{
背景颜色：绿色；
颜色：#fff；
}
tr[数据统计=“未确认”]{
背景色：红色；
颜色：#fff；
}
1.
证实
布拉。。布拉。。布拉。。
2.
未确认
布拉。。布拉。。布拉。。
你能发布CSS和HTML吗？eq是基于0的，所以你应该使用
find（“td:eq（0）”）
来获取第一个column@BenMansley表的第一列实际上是一个索引。当我将
$（this）.find（“td:eq（1）”）.text（）打印到控制台时，它显示了每行的正确值。啊，添加
.trim（）
修复了这个问题。谢谢这是什么“：eq（）”？？？这就是我所做的…但无法得到结果..请帮助$（“tr”）.each（function（）{var status=$（'#inquirylist.status.status'）.val（）；var col_val=$（this）.find（“td:eq（0）”.text（）；if（col_val==“Offer Generated”）{$（this.addClass（'red'））；//所选类将行涂成绿色//}else{$（this.addClass（'blue'）；}）；MyHTML:${inquiryList.status.status}到目前为止给出的答案中，这是最干净的解决方案。不需要JavaScript或jQuery。很快，新的CSS“：has（）”（）伪选择器将是一个更加优雅的解决方案。