CODEWITHSUNDEEP
javascript
kdubs
kdubs

Reputation: 946

Color table row based on column value

I have an html table and I want to color the rows based on the value in the first column of that row. If the value is "CONFIRMED" I want to color the row green, and if it is "UNCONFIRMED" I want to color the row red.

The JS I am using to do this is:

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

The CSS looks like this:

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

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

The html table is generated from a pandas dataframe in my Django view and passed in like this:

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

The problem is that it's coloring all of my rows red. Can anyone tell me what I'm doing wrong?

Upvotes: 3

Views: 40388

Answers (4)

Tan Ory Jaka Perdana
Tan Ory Jaka Perdana

Reputation: 917

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

Upvotes: 6

Roko C. Buljan
Roko C. Buljan

Reputation: 206007

Since you use ==="CONFIRMED" make sure it's really: UPPERCASE, and that there's no leading or ending spaces " CONFIRMED" or "CONFIRMED " in the HTML.

The code you're showing will color .selected the entire row whos :eq(1) TD has the "CONFIRMED" content:

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

nothing bad about it.

if that's not what you see on your screen note that :eq() is index based, and elements index start at 0 so :eq(0) is probably what you want?

Another probable thing is that you don't have the exact content string set as "CONFIRMED" but probably there's some spaces before or after - so make sure to trim them using $.trim()

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

if you additionally want to make your code even more flexible about the UPPERCASE or Capitalization you can do as:

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

Upvotes: 7

guestposter
guestposter

Reputation: 1

If you are looking for the first column in the row you want to use:

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

Change the td:eq(1) to td:eq(0)

Upvotes: 0

Richard Hamilton
Richard Hamilton

Reputation: 26434

To find the first column in a row, you want to use the first-child selector. You can iterate over every first column with the each function.

We then look at the text and then add the appropriate class to the column's parent (tr). 

$(document).ready(function() {
    $("td:first-child").each(function() {
        if ($(this).text() === "Confirmed") {
            $(this).parent().addClass("green");
        }
        else {
            $(this).parent().addClass("red");
        }
    });
});

http://jsfiddle.net/cw43ejjf/

Upvotes: 2

Related Questions