javascript - 基于列值的颜色表行

我有一个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 View 中的pandas数据帧生成的，并像这样传递:

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

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

最佳答案

由于您使用==="CONFIRMED"，因此请确保它确实是:大写，并且HTML中没有开头或结尾空格" CONFIRMED"或"CONFIRMED "。

您显示的代码将使整个行的.selected变为彩色，而:eq(1) TD具有“CONFIRMED”内容:

$(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