Как в таблице подсветить колонки в зависимости от thead?

Question

[Павел]

Есть таблица:

.red {
  background-color: red;
}

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th class="red">Фамилия</th>
      <th>Должность</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Павел</td>
      <td>Павлов</td>
      <td>ТЫЖпрограммист</td>
    </tr>
    <tr>
      <td>Павел</td>
      <td>Дуров</td>
      <td>миллионер</td>
    </tr>
  </tbody>
</table>

Если в thead есть класс, как подсветить соответствующие ячейки в tbody? Разметку можем менять только у thead, tbody надо как-то через css или jquery.

Answer 1

[0xD34F]

О какой таблице речь и что за класс отвечает за выделение ячеек:

const table = document.querySelector('table');
const className = 'red';

Сперва собираем индексы столбцов, заголовки которых имеют класс:

const indices = Array.from(table.querySelectorAll(`thead .${className}`), n => n.cellIndex);

Затем можно добавить класс ячейкам в теле таблицы:

table.querySelectorAll('tbody tr').forEach(n => {
  indices.forEach(i => n.cells[i].classList.add(className));
});

Или, кроме добавления, можно класс ещё и убирать (если вдруг есть) в тех столбцах, заголовок которого не подсвечен:

for (const { rows } of table.tBodies) {
  for (const { cells } of rows) {
    for (let i = 0, j = 0; i < cells.length; i++) {
      j += cells[i].classList.toggle(className, i === indices[j]);
    }
  }
}