Меню

Выделение строк таблицы попеременно разными цветами



Выделение строк таблицы

В этой небольшой заметке будет рассмотрено как средствами php и css организовать выделение строк таблицы попеременно другим цветом для более читабельного вида, а также как сделать подсветку строк таблицы при событии

(то есть, при наведение курсора мыши).

Выделение строк таблицы попеременно разными цветами

В общем случае выделить строки таблицы можно при формировании html-кода страницы средствами php — «на лету». Для этого нужно, чтобы каждый второй тег

имел отдельный класс:

В css-коде свойство класса background-color будет иметь определенное значение, благодаря чему произойдет визуальное выделение каждой второй строки.

Итак, для улучшения качества юзабилити сайта с помощью ниже приведенного php-кода со счетчиком организуем попеременное выделение строк таблицы, выводимой на страницу из любой базы данных:

Обратите внимание на конструкцию

Именно она для последующего выделения каждому второму тегу открытия строки присваивается класс gr

Далее — дело техники. В таблицу стилей добавляем код

Так легко «раскрасить» попеременно все строки таблицы в желаемый цвет.

Подсветка таблицы (выделение строк таблицы при наведенном курсоре)

Теперь перейдем ко второму вопросу, а именно: как подсветить таблицу, а точнее выделить ее строки при наведении на них курсора? Решение очень простое. Чистый CSS:

Вы можете скопировать приведенный код и вставить в свой файл стилей. (Это не вызовет затруднений, как у некоторых пользователей, которым не удается скопировать текст с сайта, который защищен владельцем от копирования без дополнительных телодвижений).

Теперь вы можете без проблем выделить (сделать попеременную подсветку строк) свою html-таблицу, используя небольшой кусок php-кода, а также с помощью css-стиля улучшить пользовательские характеристики своего сайта

Учитесь основам css и php — это совсем несложно, но поможет вам справиться со многими задачами, связанными с автоматизацией. Кроме того, может прямо сейчас ознакомиться с тем, как импортировать данные SQLite в MySql через Excel — это вполне доступно даже неопытному пользователю.

Источник

Подсветить строку и колонку таблицы при помощи CSS

Подсветить строку и колонку таблицы при помощи CSS, при наведении курсора мышки на ячейку таблицыПодсветить строку таблицы при помощи CSS достаточно легко: tr:hover и задача выполнена. Подсветить колонку всегда было немного сложнее, так как нет простого HTML-элемента, который бы являлся родителем ячейки таблицы в столбце. Есть просто решение на javascript, но в этой заметке мы рассмотрим решение без использования javascript.

Трюк в использовании громадных псевдоэлементов для элемента td , при этом псевдоэлементы скрываются за пределами таблицы

Реализовывать подсветку будем при помощи псевдоэлементов, при этом у псевдоэлемента ширина должна быть равна ширине ячейки, а верхнее отрицательное поле должно быть равно половине значения от высоты (которая, в свою очередь, назначается с запасом, чтобы перекрыть любую по высоте таблицу) псевдоэлемента.

Читайте также:  Таблица история развития органического мира и основные аромозы

Отрицательный z-index располагает псевдоэлемент ниже контента. Отрицательный z-index любопытный трюк, но будьте осторожны, когда таблица вложена в другие элементы с фоном, иначе подсветка пойдет под ними.

Как заставить работать с сенсорными дисплеями

Псевдокласс :hover любопытно работает на touch-устройствах. Во-первых, элемент должен быть фокусируемым, что по умолчанию для ячеек таблиц не так. Вы, конечно, можете добавить обработчик события click на ячейку таблицы и реализовать все на JavaScript, но вот метод, позволяющий сохранить большую часть работы в CSS:

jQuery

Затем в CSS вам потребуется следующие стили:

В моем финальном примере, я немного поправил CSS с целью исключить срабатывание наведения на пустых ячейках, при наведении на заголовок в элементе thead срабатывает выделение только столбца, а при наведении на заголовок в tbody выделяется лишь строка.

Источник

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

Не редкой является ситуация, когда при просмотре данных в таблице можно перескочить взглядом с одной строки на другую, при этом заметить, что смотришь не туда куда нужно, не всегда удается. Однако этой путаницы можно легко избежать, подсвечивая нужную строку в таблице (а в этом нам поможет 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.

Это обычная таблица из 3 строк, по 3 ячейки в строке. Первая ячейка заголовочная и задана тегом TH.

1 Значение Значение
2 Значение Значение
3 Значение Значение

Рассмотрим подробнее функцию 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»); //подсветка только по клику на строке. Множественная подсветка строк по клику разрешена.

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

В итоге документ принимает вид:

И вот что получилось:

1 Значение Значение
2 Значение Значение
3 Значение Значение

. Не забудьте скачать и сохранить у себя библиотеку функций hltable.js

Важно знать

Опера версии ниже 9 испытывает серьезные трудности с применением стилей к таблицам, содержащим разделы THEAD, TFOOT, TBODY.

Поверхностно о реализации

Как вы уже поняли, всю работу выполняет функция highlightTableRows(). Что же она делает? Данная функция назначает таблице обработчики событий: onmouseover и onmouseout для подсветки при наведении мыши на ряд, и onclick для подсветки по клику. Соответственно, когда пользователь наводит курсор на строку, срабатывает функция-обработчик onmouseover, которая добавляет к строке класс с именем, переданным вторым аргументом. При выходе за границы строки срабатывает событие onmouseout, которое отменяет применение к строке класса. Ну и по клику вызывается обработчик onclick, который либо применяет класс, переданный третьим аргументом, к строке, либо отменяет его действие. Также onclick смотрит на аргумент multiple, и если он равен false (запрещено множественное выделение строк по клику), то обработчик отменяет действие класса на строку которая была «кликнута» до этого, а затем применяет класс к новой строке.

Источник

Подсветка строк в таблице по клику
и при наведении курсора мышки

Представляем Вам очень красивый JavaScript код, который осуществляет подсветку строк таблицы, находящихся в данный момент под курсором мышки. При клике по какой-либо строке таблицы, данная строка будет выделена заданным цветом. При повторном клике по выделенной строке, выделение цветом пропадет.

Читайте также:  Монеты России стоимость каталог цены на 2018 год

Обратите внимание на таблицу, расположенную чуть ниже. Попробуйте навести на данную таблицу курсор мышки и покликайте по строкам данной таблицы.

1) Значение 1 Значение 2
2) Значение 3 Значение 4
3) Значение 5 Значение 6
4) Значение 7 Значение 8

Согласитесь, что данная таблица смотрится довольно таки эффектно. Выделение строк по клику может пригодиться в тех случаях, когда пользователь сравнивает несколько длинных строк в таблице.

Для того чтобы получить подобную таблицу с подсвечивающими строками, для начала вставьте на своем сайте между тегами и следующий код:

Далее в тело странички необходимо добавить JavaScript код, который и будет подсвечивать необходимые строки. Для этого просто скопируйте ниже приведенный код на свою страничку.

script type = «text/javascript» >
function highlight_Table_Rows ( table_Id , hover_Class , click_Class , multiple ) <
var table = document . getElementById ( table_Id );
if ( typeof multiple == ‘undefined’ ) multiple = true ;

if ( hover_Class ) <
var hover_Class_Reg = new RegExp ( «\\b» + hover_Class + «\\b» );
table . onmouseover = table . onmouseout = function( e ) <
if (! e ) e = window . event ;
var elem = e . target || e . srcElement ;
while (! elem . tagName || ! elem . tagName . match (/ td | th | table / i ))
elem = elem . parentNode ;

if ( elem . parentNode . tagName == ‘TR’ &&
elem . parentNode . parentNode . tagName == ‘TBODY’ ) <
var row = elem . parentNode ;
if (! row . getAttribute ( ‘clicked_Row’ ))
row . className = e . type == «mouseover» ? row . className +
» » + hover_Class : row . className . replace ( hover_Class_Reg , » » );
>
>;
>

if ( click_Class ) table . onclick = function( e ) <
if (! e ) e = window . event ;
var elem = e . target || e . srcElement ;
while (! elem . tagName || ! elem . tagName . match (/ td | th | table / i ))
elem = elem . parentNode ;

if ( row . getAttribute ( ‘clicked_Row’ )) <
row . removeAttribute ( ‘clicked_Row’ );
row . className = row . className . replace ( click_Class_Reg , «» );
row . className += » » + hover_Class ;
>
else <
if ( hover_Class ) row . className = row . className . replace ( hover_Class_Reg , «» );
row . className += » » + click_Class ;
row . setAttribute ( ‘clicked_Row’ , true );

if (! multiple ) <
var lastRowI = table . getAttribute ( «last_Clicked_Row» );
if ( lastRowI !== null && lastRowI !== » && row . sectionRowIndex != lastRowI ) <
var lastRow = table . tBodies [ 0 ]. rows [ lastRowI ];
lastRow . className = lastRow . className . replace ( click_Class_Reg , «» );
lastRow . removeAttribute ( ‘clicked_Row’ );
>
>
table . setAttribute ( «last_Clicked_Row» , row . sectionRowIndex );
>
>
>;
>

Далее в том месте, где должна располагаться Ваша табличка (которую мы будем разукрашивать) создаем таблицу следующим образом:

Далее остается только активировать нашу функцию highlight_Table_Rows (описанную ранее), которая и будет делать всю работу по подсветку строк таблицы. Делается это следующим образом:

В результате у Вас на сайте должна появиться точно такая же табличка с подсвечивающимися строками, как и в нашем примере, показанном выше.

Источник