Блог

Я хотел бы добавить с помощью javascript класс в ячейку таблицы, если другая ячейка в другом столбце содержит определенное значение. Я использую плагин для создания таблицы, а данные поступают из файла JSON, поэтому я не могу редактировать HTML-код таблицы.

Например, если ячейка в столбце «Компания» содержит «Эрнст Гендель», я хотел бы добавить класс .custom-class в другую ячейку в той же tr ячейке, в моем случае в ячейку «Австрия» в столбце Страна.

Что я пробовал, так это:

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

Вот пример:

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

здесь jsFiddle

Заранее большое спасибо

В этой строке:

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

this указывает на всю строку, а не на td , поэтому в основном вы добавляете имя класса к tr элементу. Если ячейка, которую вы хотите выбрать, всегда находится в третьем столбце, как в вашем примере, то один из способов настроить на нее таргетинг — использовать nth-child :

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

 $('tr').each(function(){
   if($('td:contains("Ernst Handel")', this).length amp;amp; $('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>