颜色表行基于列值

Question

我有一个html表，我想根据该行第一列中的值为行着色。如果值为“ CONFIRMED”，我想将行涂成绿色，如果值为“ UNCONFIRMED”，我想将行涂成红色。

我正在使用的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;
}

html表是从Django视图中的pandas数据帧生成的，并像这样传递：

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

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

Answer 1

由于您使用==="CONFIRMED"确保它真的：大写，并且没有前导或结尾空格" CONFIRMED"或者"CONFIRMED "在HTML。

您显示的代码将使TD包含“ CONFIRMED”内容.selected的整行着色:eq(1)：

$(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');
    }
  });
});

.selected{
  background-color:green;
}
.bad{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td><td>CONFIRMED</td>
  </tr>
  <tr>
    <td>2</td><td>UNCONFIRMED</td>
  </tr>
</table>

没什么不好的。

如果那不是您在屏幕上看到的:eq()基于索引的注释，而元素索引从此开始，0那么:eq(0)您可能想要的是什么？

另一个可能的事情是，您没有设置与内容字符串相同的内容，"CONFIRMED"但是前后可能有一些空格-因此请确保使用来修剪它们$.trim()

if( $.trim(col_val) === "CONFIRMED" )

如果您还想使代码在大写或大写方面更加灵活，则可以执行以下操作：

if( $.trim(col_val.toLowerCase() ) === "confirmed" )
// Will work on "CONFIRMED", "Confirmed", "conFIRMed" etc

Answer 2

<style>
    tr[data-stat="confirmed"]{
        background-color: green;
        color: #fff;
    }
    tr[data-stat="unconfirmed"]{
        background-color: red;
        color: #fff;
    }
</style>

<table>
    <tr data-stat="confirmed">
        <td>1</td>
        <td>Confirmed</td>
        <td>bla.. bla.. bla..</td>
    </tr>
    <tr data-stat="unconfirmed">
        <td>2</td>
        <td>Not Confirmed</td>
        <td>bla.. bla.. bla..</td>
    </tr>
</table>