如果另一个单元格包含值，则向表格单元格添加类

Question

I would like to add via javascript a class to a table's cell if another cell into another column contains a certain value. I am using a plugin to generate the table and datas comes from a JSON file, so I cannot edit the HTML code of the table.

For example if a cell in the "Company" column contains "Ernst Handel" I would like to add a class .custom-class to another cell in the same tr , in my case to the cell "Austria" in the column Country.

What I tried is:

$('tr').each(function(){
   if($('td:contains("Ernst Handel")', this).length && $('td:contains("Austria")', this).length){       
        alert('here');
        $(this).addClass('custom-class');
    }
});

Here a sample:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

CSS

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.custom-class {
  border: 1px solid red;
}

here a jsFiddle

Many thanks in advance

Answer 1

In this line:

$(this).addClass('custom-class');

this points to the whole row, not the td , so basically you are adding the class name to the tr element. If the cell you want to select is always in the third column like your example, then one way to target it is by using nth-child :

$(this).find("td:nth-child(3)").addClass('custom-class');

 $('tr').each(function(){ if($('td:contains("Ernst Handel")', this).length && $('td:contains("Austria")', this).length){ alert('here'); $(this).find("td:nth-child(3)").addClass('custom-class'); } });

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } .custom-class { border: 1px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table>