В этой статье мы рассмотрим, как можно реализовать подсветку строк в HTML-таблице с помощью JavaScript. Это может быть полезно для улучшения юзабилити веб-приложений, где требуется акцентировать внимание пользователя на определенных данных.
Пример кода
Ниже представлен простой пример HTML-таблицы с добавлением 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; } .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> </table> <script> document.querySelectorAll('#myTable tr').forEach(tr => { tr.addEventListener('mouseover', () => { tr.classList.add('highlighted'); }); tr.addEventListener('mouseout', () => { tr.classList.remove('highlighted'); }); }); </script> </body> </html>
Объяснение работы кода
- HTML: В документе создается простая таблица с заголовком и несколькими строками данных.
- CSS: Стилизуем таблицу и добавляем класс
.highlighted, который используется для изменения фона строки при наведении. - JavaScript:
- Сначала выбираем все строки таблицы с помощью метода
querySelectorAll(). - Для каждой строки добавляем два обработчика событий:
mouseover— добавляет класс.highlightedпри наведении курсора на строку.mouseout— удаляет класс.highlightedпри уходе курсора с строки.
- Сначала выбираем все строки таблицы с помощью метода
Этот подход позволяет динамически изменять внешний вид строк таблицы при взаимодействии пользователя с ними, делая интерфейс более интерактивным и удобным для восприятия информации.
Надеюсь, эта статья поможет вам легко внедрить подсветку строк в ваши проекты!
Загрузка...