Задать background-color для столбца таблицы

Question

Есть таблица вида

<table>
  <thead>
    <tr>
      <th></th>...<th></th>
      <th id="count">Всего</th>
      <th></th>...<th></th>
      <th id="count">Всего</th>
      <th id="total">Итого</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>... <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>... <td></td>
    </tr>
  </tbody>
</table>

Количество столбцов разное от 1 до бесконечности . Нужно покрасить в цвет "Всего" и "Итого" используя CSS или JS по id

Answer 1

По-моему, использовать классы правильнее, так как id должен быть уникальным в HTML. В нашем случае заголовков с текстом "Всего" и "Итого" может быть несколько, поэтому применим классы count и total, а затем с помощью CSS зададим нужный background-color. JavaScript добавит соответствующие классы ячейкам td под этими заголовками.

document.addEventListener("DOMContentLoaded", function() {
  const table = document.querySelector("table");
  const thead = table.querySelector("thead");
  const tbody = table.querySelector("tbody");

  function highlightColumns(headerClass, highlightClass) {
    const headers = thead.querySelectorAll(`th.${headerClass}`);
    headers.forEach(th => {
      const index = [...th.parentNode.children].indexOf(th);
      [...tbody.rows].forEach(row => {
        const cell = row.cells[index];
        if (cell) cell.classList.add(highlightClass);
      });
    });
  }

  highlightColumns("count", "highlight-count");
  highlightColumns("total", "highlight-total");
});

table {
  border-collapse: collapse;
  width: 100%;
}

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

.highlight-count {
  background-color: #fff9c4;
}

.highlight-total {
  background-color: #c8e6c9;
}

<table>
  <thead>
    <tr>
      <th>№</th>
      <th>Имя</th>
      <th class="count">Всего</th>
      <th>Среднее</th>
      <th>Примечание</th>
      <th class="count">Всего</th>
      <th class="total">Итого</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Алиса</td>
      <td>5</td>
      <td>3</td>
      <td>OK</td>
      <td>7</td>
      <td>12</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Боб</td>
      <td>8</td>
      <td>4</td>
      <td>OK</td>
      <td>6</td>
      <td>14</td>
    </tr>
  </tbody>
</table>

Answer 2

Да, конечно, id не подойдут для нескольких элементов. Только class.

А для выбора N-го элемента есть замечательные псевдоселекторы :first-child, :last-child, :nth-child(An+B), :nth-last-child(An+B)

Так что можно без скрипта:

table {
  border-collapse: collapse;
  width: 100%;
}

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

.count {
  background-color: #fff9c4;
}

.total {
  background-color: #c8e6c9;
}

tbody td:nth-child(3){
  background-color: #fff9c4;
}

tbody td:last-child{
  background-color: #c8e6c9;
}

tbody td:nth-last-child(2){
  background-color: #fff9c4;
}

<table>
  <thead>
    <tr>
      <th>№</th>
      <th>Имя</th>
      <th class="count">Всего</th>
      <th>Среднее</th>
      <th>Примечание</th>
      <th class="count">Всего</th>
      <th class="total">Итого</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Алиса</td>
      <td>5</td>
      <td>3</td>
      <td>OK</td>
      <td>7</td>
      <td>12</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Боб</td>
      <td>8</td>
      <td>4</td>
      <td>OK</td>
      <td>6</td>
      <td>14</td>
    </tr>
  </tbody>
</table>

БЛОГ НА HUSL

Задать background-color для столбца таблицы

Ответы (2 шт):