Выделение строк таблицы курсором мыши
Влад Мержевич
Выделение строки таблицы при наведении на нее курсора мыши или подсветка строк,
как еще называют этот эффект, позволяет весьма наглядно пометить ячейки таблицы.
Выделение происходит динамически, при наведении курсора на строку меняется ее
цвет фона, когда курсор уводится прочь, фон снова восстанавливается на первоначальный,
как показано ниже.
Нефть
43
51
79
Золото
29
34
48
Дерево
38
57
36
Создание подсветки происходит с помощью скрипта и CSS. Вначале описываем стиль
таблицы. Чтобы применить эффект только для определенных таблиц, им лучше присвоить
свой собственный класс. Это делать не обязательно в том случае, если на веб-странице
все таблицы предстоит оформить одинаково.
TABLE.ruler {
width: 100%; /* Ширина таблицы */
border: 1px solid navy /* Параметры рамки вокруг таблицы
*/
}
.ruler TD {
padding: 4px /* Поля вокруг содержимого ячеек */
}
Для выделенных строк таблицы тоже необходимо указать стиль, определив в нем
цвет фона и текста. Имя класса имеет значение, поскольку на него в последующем
придется ссылаться.
TR.line {
background: #fc0; /* Цвет фона выделенной строки */
color: #333 /* Цвет текста */
}
И, наконец, чтобы не менялся цвет заголовка аналогично другим строкам, ему
следует присвоить свой собственный класс.
.header {
background: navy; /* Цвет фона заголовка */
color: white /* Цвет текста */
}
Самой таблице требуется установить стилевой класс ruler, как он указан в стиле,
а также присвоить заголовку таблицы класс header (пример 1). В остальном готовить
таблицу больше не требуется и никаких других ограничений на ее параметры не
накладывается.
Пример 1. Код таблицы
<table class=ruler>
<tr class=header>
<th> </th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
</tr>
<tr>
<td><div id=tr1>Нефть</div></td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td>Золото</td>
<td>29</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td>Дерево</td>
<td>38</td>
<td>57</td>
<td>36</td>
</tr>
</table>
Теперь переходим к скрипту. Принцип его работы достаточно прост. Вначале
просматриваем все таблицы, у которых установлен стиль с именем ruler. Таким
образом, остальные таблицы будут отображаться как обычно, без всякой подсветки.
Для таблиц с классом ruler вводим цикл по всем строкам таблицы кроме строки
заголовка. Если для строки срабатывает событие onMouseOver,
отвечающее за наведение курсора мыши, меняем класс строки (тег TR)
на line. Событие onMouseOut, которое выполняется
в случае вывода курсора из строки, снова меняет класс на предыдущий (пример 2).
Пример 2. Функция для изменения стиля строк таблицы
function
tableRuler() {
// Проверяем, поддерживает ли текущий браузер DOM
if (document.getElementById) {
tables = document.getElementsByTagName("table")
// Пробегаемся по всем таблицам на странице
for (i=0;i<tables.length;i++) {
// Работаем только с теми таблицами, у которых установлен класс с именем ruler
if (tables[i].className == "ruler") {
trs = tables[i].getElementsByTagName("tr")
// Пробегаемся по всем строкам выбранной таблицы
for (j=0;j<trs.length;j++) {
// Для заголовка таблицы цвет не меняется
if (trs[j].className != "header") {
trs[j].onMouseOver = function() { this.className = "line"; return false
}
trs[j].onMousOout = function() { this.className = ""; return false }
}
}
}
}
}
}
Остается вызвать написанную функцию через событие onLoad
в теге BODY и свести воедино код стиля, таблицы и скрипта,
как показано в примере 3.
Пример 3. Окончательный код для создания подсветки строк
<html>
<head>
<style type="text/css">
TABLE.ruler {
width: 100%; border: 1px solid navy
}
TR.line {
background: #fc0; color: #333
}
.ruler TD {
padding: 4px
}
.header {
background: navy; color: white
}
</style>
<script language="JavaScript">
function tableRuler() {
if (document.getElementById) {
tables = document.getElementsByTagName("table")
for (i=0;i<tables.length;i++) {
if (tables[i].className == "ruler") {
trs = tables[i].getElementsByTagName("tr")
for (j=0;j<trs.length;j++) {
if (trs[j].className != "header") {
trs[j].onmouseover = function() { this.className = "line"; return false }
trs[j].onmouseout = function() { this.className = ""; return false }
} } } } }
}
</script>
</head>
<body onLoad="tableRuler()">
Выделение строк таблицы курсором мыши - Главная
Выделение строки таблицы при наведении на нее курсора мыши или
подсветка строк, ... Создание подсветки происходит с помощью скрипта и
CSS.
http://www.libray.narod.ru/html/pr_232.html
<table class=ruler>
<tr class=header>
<th> </th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
</tr>
<tr>
<td><div id=tr1>Нефть</div></td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td>Золото</td>
<td>29</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td>Дерево</td>
<td>38</td>
<td>57</td>
<td>36</td>
</tr>
</table>
</body>
</html>