color a cell base on column name with jquery

Question

I need to color a cell if the value is "ok" and if the cell is part of the column named "name".

var intervalId = window.setInterval(function(){
    var tableRow = $("td").filter(function() {

        if($(this).text() === "ok") {
            $(this).addClass( "table-danger" );
        }  

    }).closest("tr");
  }, 1000);

.table-danger {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ok;</td> <!-- NO color -->
            <td>aa;</td>
            <td>ok</td>  <!-- color -->
        </tr>
        <tr>
            <td>cc;</td>
            <td>aa;</td>
            <td>else</td>
        </tr>
        <tr>
            <td>bb;</td>
            <td>aa;</td>
            <td>else</td>
        </tr>
        <tr>
            <td>bb;</td>
            <td>aa;</td>
            <td>ok</td>
        </tr>
    </tbody>
</table>

I can do the color with that function, but it will color all cell with "ok". How can I adapt my function ?

Your `.filter` doesn't return anything so `var tableRow` will be *all* table rows. These (and the setTimeout) don't seem relevant to the question. — freedomn-m, Feb 09 '22 at 11:51
Inspect the row from developer console, see if the row or the column is getting that class? — techie_28, Feb 09 '22 at 11:51
Your sample might have more credence if the "no colour" wasn't `ok;` which doesn't match `ok` anyway... — freedomn-m, Feb 09 '22 at 11:54

score 1 · Accepted Answer · answered Feb 09 '22 at 12:03

If you do not know in advance which column number it will be you can loop over thead and find out:

$('thead th').each(function(i) {
  if($(this).text() == 'name'){
    columnNr = i+1;
  }
});

let columnNr;

$('thead th').each(function(i) {
  if($(this).text() == 'name'){
    columnNr = i+1;
  }
});

var tableRow = $("td:nth-child("+columnNr+")").each(function() {

  if ($(this).text() === "ok") {
    $(this).addClass("table-danger");
  }

});

.table-danger {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ok</td> <!-- NO color -->
            <td>aa;</td>
            <td>ok</td>  <!-- color -->
        </tr>
        <tr>
            <td>cc;</td>
            <td>aa;</td>
            <td>else</td>
        </tr>
        <tr>
            <td>bb;</td>
            <td>aa;</td>
            <td>else</td>
        </tr>
        <tr>
            <td>bb;</td>
            <td>aa;</td>
            <td>ok</td>
        </tr>
    </tbody>
</table>

freedomn-m · Answer 2 · 2022-02-09T12:10:59.263

You can use

td:nth-child

to select td's that are in a specific column, note that this is 1-based, so 3rd column is td:nth-child(3)

Keeping the original code of looping through and addClass as they are found:

$("td:nth-child(3)").each(function() {
  if ($(this).text() === "ok") {
    $(this).addClass("table-danger");
  }
})

normally, you would return true in the filter (in the original code) and mass-apply addClass, ie:

var cells = $("td:nth-child(3)").filter(function() {
  return $(this).text() === "ok";
})
cells.addClass("table-danger");

var cells = $("td:nth-child(3)").filter(function() {
  return $(this).text() === "ok";
})
cells.addClass("table-danger");

.table-danger {
  background-color: pink
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ok</td>          <!-- NO color -->
      <td>aa;</td>
      <td>ok</td>          <!-- color -->
    </tr>
    <tr>
      <td>cc;</td>
      <td>aa;</td>
      <td>else</td>
    </tr>
    <tr>
      <td>bb;</td>
      <td>aa;</td>
      <td>else</td>
    </tr>
    <tr>
      <td>bb;</td>
      <td>aa;</td>
      <td>ok</td>
    </tr>
  </tbody>
</table>

If the column is unknown, but needs to be the "name" column, then you'll need to find that column first, filter is again ideal for this.

var column = $("thead th").filter(function() {
  return $(this).text() === "name";
});
var colIndex = column.index() + 1; /// from 0-based to 1-based

var column = $("thead th").filter(function() {
  return $(this).text() === "name";
});
var colIndex = column.index() + 1; /// from 0-based to 1-based

$(`td:nth-child(${colIndex})`).each(function() {

  if ($(this).text() === "ok") {
    $(this).addClass("table-danger");
  }

})

.table-danger {
  background-color: pink
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>name</th>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ok</td>      
      <td>aa;</td>
      <td>ok</td>      
    </tr>
    <tr>
      <td>cc;</td>
      <td>aa;</td>
      <td>else</td>
    </tr>
    <tr>
      <td>bb;</td>
      <td>aa;</td>
      <td>else</td>
    </tr>
    <tr>
      <td>bb;</td>
      <td>aa;</td>
      <td>ok</td>
    </tr>
  </tbody>
</table>

@techie_28 not sure what you mean. OP is asking to look only in the "name" column. If you want any column, don't use nth-child, as per OPs code. Had the same issue of "ok;" in 1st column which had the effect of not proving it wasn't including that column - is that what you meant? — freedomn-m, Feb 09 '22 at 12:00
Or do you mean if the "name" could be any column, not just the third? You would need to find the index of the "name" column first then use `$("td:nth-child(" + col + ")")` — freedomn-m, Feb 09 '22 at 12:03

color a cell base on column name with jquery

2 Answers2