Когда речь идет о работе с большими объемами данных, особенно в таблицах, важно сделать информацию максимально доступной и удобной для восприятия. Один из способов достижения этого — использование чередующихся цветов строк и подсветки активных строк при наведении курсора. Это улучшает читаемость таблицы и помогает пользователям быстрее находить нужную информацию. В этой статье мы рассмотрим, как можно достичь такого эффекта с помощью JavaScript.
Практический пример
Рассмотрим создание таблицы с десятью строками, где строки будут чередоваться по цвету, а активная строка будет выделяться при наведении курсора.
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <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; /* Темный оттенок */ } .highlighted { background-color: lightblue; /* Цвет подсветки */ } </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> <tr><td>Сергей</td><td>Кузнецов</td><td>32</td></tr> <tr><td>Елена</td><td>Михайлова</td><td>27</td></tr> <tr><td>Дмитрий</td><td>Васильев</td><td>29</td></tr> <tr><td>Ольга</td><td>Николаева</td><td>26</td></tr> <tr><td>Алексей</td><td>Орлов</td><td>31</td></tr> <tr><td>Марина</td><td>Павлова</td><td>24</td></tr> <tr><td>Виктор</td><td>Захаров</td><td>33</td></tr> </table> <script> // Функция для авто-чередования цвета строк function alternateRowColors(table) { const rows = table.querySelectorAll("tr:not(:first-child)"); rows.forEach((row, index) => { if (index % 2 === 0) { row.classList.add("even-row"); } else { row.classList.add("odd-row"); } }); } // Функция для подсветки строки при наведении function highlightRows(table) { const rows = table.querySelectorAll("tr:not(:first-child)"); rows.forEach(row => { row.addEventListener('mouseover', () => { row.classList.add('highlighted'); }); row.addEventListener('mouseout', () => { row.classList.remove('highlighted'); }); }); } // Инициализация функций после загрузки страницы window.onload = () => { const myTable = document.getElementById("myTable"); alternateRowColors(myTable); highlightRows(myTable); }; </script> </body> </html>
Объяснение работы кода
- HTML: В документе создается таблица с заголовком и десятью строками данных.
- CSS: Определяем стили для таблицы и создаем три класса:
.odd-rowи.even-rowдля авто-чередования фона строк..highlightedдля подсветки строки при наведении.
- JavaScript:
- Функция
alternateRowColors(table)принимает таблицу в качестве аргумента и чередует классы.odd-rowи.even-rowдля всех строк, кроме первой (заголовочной). - Функция
highlightRows(table)добавляет обработчики событийmouseoverиmouseoutко всем строкам таблицы, кроме первой. При наведении курсора на строку добавляется класс.highlighted, а при уходе курсора — удаляется. - После загрузки страницы вызываются обе функции для инициализации чередования и подсветки строк.
- Функция
Использование чередования цвета строк и подсветки активной строки значительно упрощает работу с таблицами, особенно если данные занимают несколько экранов. Такой подход делает таблицы визуально привлекательными и удобными для восприятия, улучшая взаимодействие пользователей с вашим веб-приложением.
Загрузка...