Посетив http://7days.ru/promokodi/promokod-traektoria с промокодами Траектория, сэкономь 10%. . Купить аккумулятор для Mazda 929 на сайте Аккумуляторной Базы


/* 14.06.2006 */

Подсвечивание строк таблицы

Автор: Цыгырлаш Игорь (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)

Примеры:

Так. У нас есть таблица, библиотека функций, и мы знаем, как инициализировать подсветку. Теперь осталось определить стили, которые будут применяться к ряду при наведении и/или клике.

.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://7days.ru/promokodi/promokod-traektoria с промокодами Траектория, сэкономь 10%. . Купить аккумулятор для Mazda 929 на сайте Аккумуляторной Базы
<- Назад к списку статей
•> Javascript SELECT - динамические списки
<• Javascript fading - плавное изменение цветов