Как изменить цвет строк HTML-таблицы с помощью JavaScript в зависимости от значения ячейки?

Оффтоп javascript
1

Привет, ребята! У меня возникла проблема с форматированием HTML-таблицы. Мне нужно с помощью чистого JavaScript (без jQuery и других библиотек) менять цвет фона строк таблицы в зависимости от значения в определенном столбце.

Вот что я хочу сделать:

  • Если в столбце ‘Результат’ значение ‘Успех’, то вся строка должна стать зеленой
  • Если значение ‘Неудача’, то строка должна быть красной

Я новичок в JavaScript и уже пробовал разные варианты, но ничего не получается. Сейчас у меня есть функция сортировки таблицы по клику на заголовок, но я не могу разобраться, как добавить условное форматирование.

Можете подсказать, как это сделать? Буду очень благодарен за помощь или пример кода. Спасибо!

2

Слушай, а можно сделать функцию, которая будет проверять значение ячейки и менять цвет строки? Типа:

function changeRowColor(row) {
let cell = row.cells[индекс_нужной_ячейки];
row.style.backgroundColor = cell.textContent === ‘Успех’ ? ‘lightgreen’ : ‘lightcoral’;
}

И потом вызывать ее для каждой строки. Так код будет чище и проще поддерживать. Как думаешь, сработает?

3

Попробуй такой подход: выбери все строки таблицы через querySelectorAll(‘tr’), пройдись по ним циклом. В каждой строке найди нужную ячейку (например, lastElementChild для последнего столбца). Проверь ее текст и задай соответствующий стиль всей строке:

tr.style.backgroundColor = cell.textContent === ‘Успех’ ? ‘green’ : ‘red’;

Можно оформить это в функцию и вызывать после загрузки страницы или после сортировки. Такой способ должен сработать для простой таблицы. Удачи!

4

слуш, а я недавно как раз с таким заморачивался. в итоге сделал через CSS-классы, оказалось проще. типа так:

function updateRowColors() {
const rows = document.querySelectorAll(‘table tr’);
rows.forEach(row => {
const resultCell = row.querySelector(‘td:last-child’);
if (resultCell) {
row.classList.remove(‘success’, ‘failure’);
row.classList.add(resultCell.textContent.toLowerCase());
}
});
}

а в CSS просто задаешь:

.success { background-color: #90EE90; }
.failure { background-color: #FFA07A; }

вызываешь updateRowColors() после загрузки и после сортировки. так и код чище, и стили отдельно. может, тебе подойдет такой вариант?