Статьи
Подсвечивание строк таблицы
Не редкой является ситуация, когда при просмотре данных в таблице можно перескочить взглядом с одной строки на другую, при этом заметить, что смотришь не туда куда нужно, не всегда удается. Однако этой путаницы можно легко избежать, подсвечивая нужную строку в таблице (а в этом нам поможет 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. Подсветка строк таблицы при наведении мыши на строку (подсветка по клику полностью отключена).
Выделение строк таблицы курсором мыши - Главная
Выделение строки таблицы при наведении на нее курсора мыши или
подсветка строк, ... Создание подсветки происходит с помощью скрипта и
CSS.
http://www.libray.narod.ru/html/pr_232.html
Поводите мышкой над строками таблицы.
Заголовок
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.: В коде библиотеки функций для любознательных достаточно комментариев.
Автор: Игорь Цыгырлаш
Источник: http://tigir.com