СтатьиПодсвечивание строк таблицыНе редкой является ситуация, когда при просмотре данных в таблице можно перескочить взглядом с одной строки на другую, при этом заметить, что смотришь не туда куда нужно, не всегда удается. Однако этой путаницы можно легко избежать, подсвечивая нужную строку в таблице (а в этом нам поможет Javascript). Подсвеченная строка выделяется из серой массы строк таблицы и не позволяет сбиться, к тому же, это ещё и красиво смотрится. Начнем с примераПример 1. Подсветка строк таблицы при наведении мыши на строку + подсветка последней кликнутой строки. Поводите мышкой над строками таблицы, покликайте на нескольких строках.
Пример 2. Подсветка по клику нескольких строк, а не только одной как в примере 1 (подсветка при наведении мыши на строку отключена). Покликайте на нескольких строках.
Пример 3. Подсветка строк таблицы при наведении мыши на строку (подсветка по клику полностью отключена). Поводите мышкой над строками таблицы.
Взгляд изнутриПервым делом создаем обычную таблицу, без какой либо подсветки строк. Придаем таблице некий начальный облик с помощью 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 ячейки в строке. Первая ячейка заголовочная и задана тегом
Теперь добавляем функциональность подсветки. В разделе Рассмотрим подробнее функцию highlightTableRows(), а вернее её аргументы.
Синтаксис:
Примеры: // подсветка только при наведении 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> И вот что получилось:
!!! Не забудьте скачать и сохранить у себя библиотеку функций hltable.js Важно знать
Опера версии ниже 9 испытывает серьезные трудности с применением стилей к таблицам, содержащим разделы Поверхностно о реализации
Как вы уже поняли, всю работу выполняет функция
Следует подчеркнуть, что обработчики назначаются именно таблице, элементу, соответствующему тегу P.S.: В коде библиотеки функций для любознательных достаточно комментариев.
Автор: Игорь Цыгырлаш |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||