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"，请确保它确实是：大写，并且HTML中没有前导或结尾空格" CONFIRMED"或"CONFIRMED "。

您展示的代码将.selected整个行:eq(1) TD具有“已确认”内容的颜色为$(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() ，但可能在之前或之后有一些空格 - 所以请务必使用{{1 }}

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>

Answer 3

如果您要查找要使用的行中的第一列：

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

将td:eq(1)更改为td:eq(0)

Answer 4

要查找连续的第一列，您需要使用dicts选择器。您可以使用first-child函数迭代每个第一列。

然后我们查看文本，然后将相应的类添加到列的父级（each）。

tr

http://jsfiddle.net/cw43ejjf/

基于列值的颜色表行

4 个答案: