/* 14.06.2006 */
Подсвечивание строк таблицы
Не редкой является ситуация, когда при просмотре данных в таблице можно перескочить взглядом с одной строки на другую, при этом заметить, что смотришь не туда куда нужно, не всегда удается. Однако этой путаницы можно легко избежать, подсвечивая нужную строку в таблице (а в этом нам поможет Javascript). Подсвеченная строка выделяется из серой массы строк таблицы и не позволяет сбиться, к тому же, это ещё и красиво смотрится.
Начнем с примера
Пример 1. Подсветка строк таблицы при наведении мыши на строку + подсветка последней кликнутой строки.
Поводите мышкой над строками таблицы, покликайте на нескольких строках.
| Заголовок | ||
|---|---|---|
| 1 | Значение | Значение |
| 2 | Значение | Значение |
| 3 | Значение | Значение |
| 4 | Значение | Значение |
| 5 | Значение | Значение |
| 6 | Значение | Значение |
| 7 | Значение | Значение |
| 8 | Значение | Значение |
| 9 | Значение | Значение |
| 10 | Значение | Значение |
| Нижний колонтитул | Нижний колонтитул | |
Пример 2. Подсветка по клику нескольких строк, а не только одной как в примере 1 (подсветка при наведении мыши на строку отключена).
Покликайте на нескольких строках.
| Заголовок | ||
|---|---|---|
| 1 | Значение | Значение |
| 2 | Значение | Значение |
| 3 | Значение | Значение |
| 4 | Значение | Значение |
| 5 | Значение | Значение |
| 6 | Значение | Значение |
| 7 | Значение | Значение |
| 8 | Значение | Значение |
| 9 | Значение | Значение |
| 10 | Значение | Значение |
| Нижний колонтитул | Нижний колонтитул | |
Пример 3. Подсветка строк таблицы при наведении мыши на строку (подсветка по клику полностью отключена).
Поводите мышкой над строками таблицы.
| Заголовок | ||
|---|---|---|
| 1 | Значение | Значение |
| 2 | Значение | Значение |
| 3 | Значение | Значение |
| 4 | Значение | Значение |
| 5 | Значение | Значение |
| 6 | Значение | Значение |
| 7 | Значение | Значение |
| 8 | Значение | Значение |
| 9 | Значение | Значение |
| 10 | Значение | Значение |
| Нижний колонтитул | Нижний колонтитул | |
Взгляд изнутри
Первым делом создаем обычную таблицу, без какой либо подсветки строк. Придаем таблице некий начальный облик с помощью CSS.
<html> <head> <style type="text/css"> /* задаем рамок таблицы */ table, td, th { border: 1px solid black; border-collapse: collapse; } /* цвет фона заголовочных ячеек (первый столбец) */ table TH {background-color: gold;} </style> </head> <body> <table id="myTable"> <tr> <th>1</th><td>Значение</td><td>Значение</td> </tr> <tr> <th>2</th><td>Значение</td><td>Значение</td> </tr> <tr> <th>3</th><td>Значение</td><td>Значение</td> </tr> </table> </body> </html>
Это обычная таблица из 3 строк, по 3 ячейки в строке. Первая ячейка заголовочная и задана тегом TH.
| 1 | Значение | Значение |
|---|---|---|
| 2 | Значение | Значение |
| 3 | Значение | Значение |
Теперь добавляем функциональность подсветки. В разделе head подключаем библиотеку функций: <script type="text/javascript" src="/js/hltable.js"></script>, а после закрывающегося тега </table>, вызываем функцию highlightTableRows(), из ранее подключенной библиотеки, для инициализации подсветки.
Рассмотрим подробнее функцию highlightTableRows(), а вернее её аргументы.
Синтаксис: highlightTableRows(tableId, highlightClass, clickClass, multiple)
- tableId - id таблицы, к которой нужно применить подсвечивание;
- highlightClass - имя CSS-класса который нужно применить к строке (к тегу TR) при наведении на неё курсора мыши (если передать пустую строку, то подсветки при наведении не будет);
- clickClass - имя CSS-класса который нужно применить к строке (к тегу TR) при клике на ней (если передать пустую строку, то подсветки по клику не будет);
- multiple - этот аргумент разрешает или запрещает подсветку по клику нескольких строк, по умолчанию true - подсветка нескольких строк разрешена, если передать значение false, то подсвечиваться будет лишь последняя кликнутая строка.
Примеры:
- highlightTableRows("myTable", "className1"); //подсветка только при наведении
- highlightTableRows("myTable", "className1", "className2", false); //подсветка при наведении на строку курсора мыши и по клику на строке. Множественная подсветка строк по клику отключена.
- highlightTableRows("myTable", "", "className2"); //подсветка только по клику на строке. Множественная подсветка строк по клику разрешена.
Так. У нас есть таблица, библиотека функций, и мы знаем, как инициализировать подсветку. Теперь осталось определить стили, которые будут применяться к ряду при наведении и/или клике.
.hoverRow { background-color: yellow; }
.clickedRow { background-color: orange; }
В итоге документ принимает вид:
<html> <head> <!-- Подключаем библиотеку функций --> <script type="text/javascript" src="/js/hltable.js"></script> <style type="text/css"> table, td, th {border: 1px solid black; border-collapse: collapse;} table th {background-color: gold;} /* Определяем стили для подсвечивания строк */ .hoverRow { background-color: yellow; } .clickedRow { background-color: orange; } </style> </head> <body> <table id="myTable"> <tr> <th>1</th><td>Значение</td><td>Значение</td> </tr> <tr> <th>2</th><td>Значение</td><td>Значение</td> </tr> <tr> <th>3</th><td>Значение</td><td>Значение</td> </tr> </table> <script type="text/javascript">
//Подсветка по клику и при наведении мышки на ряд, множественный выбор по клику разрешен highlightTableRows("myTable","hoverRow","clickedRow");
</script> </body> </html>
И вот что получилось:
| 1 | Значение | Значение |
|---|---|---|
| 2 | Значение | Значение |
| 3 | Значение | Значение |
!!! Не забудьте скачать и сохранить у себя библиотеку функций hltable.js
Важно знать
Опера версии ниже 9 испытывает серьезные трудности с применением стилей к таблицам, содержащим разделы THEAD, TFOOT, TBODY.
Поверхностно о реализации
Как вы уже поняли, всю работу выполняет функция highlightTableRows(). Что же она делает? Данная функция назначает таблице обработчики событий: onmouseover и onmouseout для подсветки при наведении мыши на ряд, и onclick для подсветки по клику. Соответственно, когда пользователь наводит курсор на строку, срабатывает функция-обработчик onmouseover, которая добавляет к строке класс с именем, переданным вторым аргументом. При выходе за границы строки срабатывает событие onmouseout, которое отменяет применение к строке класса. Ну и по клику вызывается обработчик onclick, который либо применяет класс, переданный третьим аргументом, к строке, либо отменяет его действие. Также onclick смотрит на аргумент multiple, и если он равен false (запрещено множественное выделение строк по клику), то обработчик отменяет действие класса на строку которая была "кликнута" до этого, а затем применяет класс к новой строке.
Следует подчеркнуть, что обработчики назначаются именно таблице, элементу, соответствующему тегу TABLE, а не строкам или ячейкам, но при этом они (обработчики) срабатывают при возникновении события в строке, что происходит благодаря просачиванию события (event bubbling), когда событие в дочернем элементе запускает обработчики этого события в родительских элементах. Т.е., в нашем случае, событие, возникшее в строке (<TR>), запускает обработчики назначенные таблице (<TABLE>).
P.S.: В коде библиотеки функций для любознательных достаточно комментариев :-)