Меню

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

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

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

Источник

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

Для подсвечивания горизонтальных строк таблиц цветом необходимо добавить в css темы небольшой код.
Перейдите в Админ панель, выберите Настроить и Дополнительные стили. Или Внешний вид, Настроить, Параметры отображения, Собственный Css.
В окошко введите код:

>
tbody tr:hover <
background: #c1dff2; /* Цвет фона при наведении */
color: #fff; /* Цвет текста при наведении */
>

Обязательно после того как введёте код нажмите Enter, чтобы перейти на следующую пустую строку. Если этого не сделать код не будет работать.
После Сохранить и опубликовать.

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

В коде вы можете поменять цвет при наведении на свой. Для этого вам нужно изменить hex-значение #c1dff2 на своё. Для поиска необходимого цвета можно воспользоваться сервисом https://get-color.ru

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

wordpress подсвечивание строк

При необходимости вы можете также изменить цвет текста при наведении. В данном примере кода цвет при наведении заменяется на белый.

Если у вас в таблице тексту присвоена ссылка, то изменения цвета не происходит.

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

wordpress plus bootstrap

Подключаем сетку бутстрапа к теме

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

wordpress настроить статистику

Настраиваем счётчик посещений Liveinternet

Как установить счётчик посещений на свой сайт? Это очень просто. Мы будем устанавливать вот такой счётчик Это счётчик от сайта

Как настроить тему как на демонстрации

У владельцев темы colormag есть возможность настроить тему как на сайте продавца в несколько кликов. Для этого необходимо в Админ

Источник



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

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

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

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 (описанную ранее), которая и будет делать всю работу по подсветку строк таблицы. Делается это следующим образом:

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

Источник

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

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

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

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

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

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

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

jQuery

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

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

Источник

Adblock
detector