javascript - 基于列值的颜色表行

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 View 中的 Pandas 数据帧生成的，并像这样传入:

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

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

Answer 1

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

您显示的代码将着色 .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() trim 它们

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

如果您还想让您的代码在大写或大写方面更加灵活，您可以这样做:

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