Как выделить столбец таблицы на основе текста с помощью jquery?

Question

Допустим, у меня есть следующая таблица:

<table width=200 border=1>
  <tr>
    <th>Ignore</th>
    <th>Highlight</th>
    <th>Ignore</th>
  </tr>
  <tr>
    <td>yep</td>
    <td>yep</td>
    <td>yep</td>
  </tr>
  <tr>
      <td>yep</td>
      <td>yep</td>
      <td>yep</td>
  </tr>
</table>

, и я хочу выделить все Подсветка столбцов.Как мне сделать это, основываясь на тексте заголовка?

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

$('body > table > tbody > tr > td:nth-child(2)').css('background-color', 'pink');

http://jsfiddle.net/8XSLF/

Answer 1

Вам нужно получить индекс th с выделением текста.Поэтому используйте селектор :contains(), чтобы выбрать его, а затем используйте .index(), чтобы найти его индекс.В конце выберите каждые th, и td имеет индекс, равный окончательному индексу.

Обратите внимание, что элемент выбора селектора :contains() также имеет нежелательный текст, такой как Highlighted и Text Highlighted,Если текст вашей таблицы не является константой, используйте .filter().

var i = $("table th:contains('Highlight')").index();
$("table tr th, table tr td").filter(function(){
  return $(this).index() == i;
}).css("background", "pink");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width=200 border=1>
<tr>
    <th>Ignore</th>
    <th>Highlight</th>
    <th>Ignore</th>
</tr>
<tr>
    <td>yep</td>
    <td>yep</td>
    <td>yep</td>
</tr>
 <tr>
    <td>yep</td>
    <td>yep</td>
    <td>yep</td>
</tr>
</table>

Answer 2

Требуется это выделено в нескольких таблицах: окончательное решение

$("th:contains('Highlight')").each(function() {
    $(this).closest('table').find('td:nth-child(' + ($(this).index() + 1) +')').css('background-color', 'pink');
});

Answer 3

Поскольку указанное вами имя столбца не изменится, вы можете использовать jQuery.contains:

$( "body > table > tbody > tr > td:contains('Highlight')" ).css('background-color', 'pink');