color a cell base on column name with jquery-CodePudding

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 ?

CodePudding user response：

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>

CodePudding user response：

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>