В JavaScript: Как реализовать чередование фонового цвета строк в таблице или списке через условие i % 2 === 0?

Чередование фонового цвета строк (зебра-эффект) — классическая задача в веб-разработке, которая улучшает читаемость таблиц и списков. В JavaScript это удобно реализовать через оператор остатка от деления `%` и условие `i % 2 === 0`.

## Принцип работы

Оператор `%` возвращает остаток от деления. Если индекс `i` чётный, то `i % 2 === 0` вернёт `true`, если нечётный — `false`. Это позволяет применять разные стили к чётным и нечётным строкам.

## Пример для HTML-таблицы

javascript
const rows = document.querySelectorAll(‘table tr’);

rows.forEach((row, i) => {
if (i % 2 === 0) {
row.style.backgroundColor = ‘#f2f2f2’; // чётные строки
} else {
row.style.backgroundColor = ‘#ffffff’; // нечётные строки
}
});

Здесь `querySelectorAll` возвращает все строки таблицы, а метод `forEach` перебирает их с автоматическим индексом `i`, начиная с 0.

## Сокращённая запись через тернарный оператор

javascript
const rows = document.querySelectorAll(‘table tr’);

rows.forEach((row, i) => {
row.style.backgroundColor = i % 2 === 0 ? ‘#f2f2f2’ : ‘#ffffff’;
});

## Пример для списка (ul/li)

javascript
const items = document.querySelectorAll(‘ul li’);

items.forEach((item, i) => {
item.style.backgroundColor = i % 2 === 0 ? ‘#e8f4fd’ : ‘#ffffff’;
});

## Применение CSS-классов вместо inline-стилей

Более правильный подход — добавлять CSS-классы, а не inline-стили:

javascript
const rows = document.querySelectorAll(‘table tr’);

rows.forEach((row, i) => {
row.classList.add(i % 2 === 0 ? ‘row-even’ : ‘row-odd’);
});

CSS:
css
.row-even { background-color: #f2f2f2; }
.row-odd { background-color: #ffffff; }

## Динамическая генерация строк

Если строки создаются динамически из массива данных:

javascript
const data = [‘Иван’, ‘Мария’, ‘Алексей’, ‘Ольга’];
const tbody = document.querySelector(‘tbody’);

data.forEach((name, i) => {
const tr = document.createElement(‘tr’);
tr.style.backgroundColor = i % 2 === 0 ? ‘#f9f9f9’ : ‘#ffffff’;
tr.innerHTML = `

`;
tbody.appendChild(tr);
});

## Альтернатива через CSS

Стоит знать, что аналогичный эффект можно достичь чисто через CSS без JavaScript:

css
tr:nth-child(even) { background-color: #f2f2f2; }
tr:nth-child(odd) { background-color: #ffffff; }

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

## Итог

Условие `i % 2 === 0` — простой и эффективный способ чередовать стили. Используйте CSS-классы вместо inline-стилей для лучшей поддерживаемости кода.