Чередование цветов строк таблицы с помощью JavaScript

JavaScript, CSS, HTML

Чтобы автоматически чередовать цвет строк таблицы с помощью JavaScript, можно воспользоваться циклом и функцией добавления классов к четным и нечетным строкам. Вот пример кода, который демонстрирует эту технику:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Чередование цветов строк</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        .odd-row {
            background-color: #f9f9f9; /* Светлый оттенок */
        }
        .even-row {
            background-color: #e6e6e6; /* Темный оттенок */
        }
    </style>
</head>
<body>

<table id="myTable">
    <tr>
        <th>Имя</th>
        <th>Фамилия</th>
        <th>Возраст</th>
    </tr>
    <tr>
        <td>Иван</td>
        <td>Иванов</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Петр</td>
        <td>Петров</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Анна</td>
        <td>Сидорова</td>
        <td>28</td>
    </tr>
</table>

<script>
// Получаем все строки таблицы, исключая первую (заголовок)
const rows = document.querySelectorAll("#myTable tr:not(:first-child)");

rows.forEach((row, index) => {
    // Чередуем классы для четных и нечетных строк
    if (index % 2 === 0) {
        row.classList.add("even-row");
    } else {
        row.classList.add("odd-row");
    }
});
</script>

</body>
</html>

Пояснения:

  1. HTML: Создаем простую таблицу с заголовком и несколькими строками данных.
  2. CSS: Определяем стили для таблицы и создаем два класса: .odd-row для нечетных строк и .even-row для четных строк. Эти классы будут добавлять разные фоны для строк.
  3. JavaScript:
    • С помощью querySelectorAll() получаем все строки таблицы, кроме первой (заголовочной), используя селектор #myTable tr:not(:first-child).
    • Проходим по всем строкам цикла forEach, индексируя их начиная с нуля.
    • Проверяем остаток от деления индекса строки на 2 (index % 2). Если он равен нулю, строка является четной, если нет — нечетной.
    • В зависимости от результата проверки добавляем соответствующий класс строке: .even-row или .odd-row.

Этот метод позволяет автоматически чередовать цвета строк таблицы, создавая приятный визуальный эффект зебры, который облегчает восприятие больших объемов данных.

Обновлено: 26.01.2025 в 17:49 | Просмотров: 11
Загрузка...
Похожие статьи

Добавить комментарий

Войти с помощью: