Подсветка строк в таблице по клику
и при наведении курсора мышки
Представляем Вам очень красивый 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.
В окошко введите код:
>
tbody tr:hover <
background: #c1dff2; /* Цвет фона при наведении */
color: #fff; /* Цвет текста при наведении */
>
Обязательно после того как введёте код нажмите Enter, чтобы перейти на следующую пустую строку. Если этого не сделать код не будет работать.
После Сохранить и опубликовать.
В коде вы можете поменять цвет при наведении на свой. Для этого вам нужно изменить hex-значение #c1dff2 на своё. Для поиска необходимого цвета можно воспользоваться сервисом https://get-color.ru
Для этого вам необходимо выбрать нужный вам цвет, скопировать полученный код и вставить в код css.
При необходимости вы можете также изменить цвет текста при наведении. В данном примере кода цвет при наведении заменяется на белый.
Если у вас в таблице тексту присвоена ссылка, то изменения цвета не происходит.
В результате этих несложных изменений мы присвоили любой таблице подсвечивание строк нужным нам цветом. На практике это будет выглядеть примерно так:
| Название | Форма выпуска |
|---|---|
| Привет | Пока |
| Привет1 | |
| Привет2 | Пока1 |
| Привет3 | Пока2 |
Улучшаем внешний вид мобильного меню
Эта статья для тех, кто хочет немного улучшить внешний вид мобильного меню. Что можно сделать? Отцентровать пункты меню. В принципе
Улучшаем поиск по сайту
Изначально виджет поиска в теме можно установить в правой колонке Предлагаю один из вариантов как изменить внешний вид поиска, а
Метки под записью
По умолчанию под каждой записью создаётся несколько меток, указывающих определённое значение. Так же эти метки можно назвать мета данными. Не
Источник
Как выделить строку таблицы при наведении
Для подсвечивания горизонтальных строк таблиц цветом необходимо добавить в css темы небольшой код.
Перейдите в Админ панель, выберите Настроить и Дополнительные стили. Или Внешний вид, Настроить, Параметры отображения, Собственный Css.
В окошко введите код:
>
tbody tr:hover <
background: #c1dff2; /* Цвет фона при наведении */
color: #fff; /* Цвет текста при наведении */
>
Обязательно после того как введёте код нажмите Enter, чтобы перейти на следующую пустую строку. Если этого не сделать код не будет работать.
После Сохранить и опубликовать.
В коде вы можете поменять цвет при наведении на свой. Для этого вам нужно изменить hex-значение #c1dff2 на своё. Для поиска необходимого цвета можно воспользоваться сервисом https://get-color.ru
Для этого вам необходимо выбрать нужный вам цвет, скопировать полученный код и вставить в код css.
При необходимости вы можете также изменить цвет текста при наведении. В данном примере кода цвет при наведении заменяется на белый.
Если у вас в таблице тексту присвоена ссылка, то изменения цвета не происходит.
В результате этих несложных изменений мы присвоили любой таблице подсвечивание строк нужным нам цветом. На практике это будет выглядеть примерно так:
| Название | Форма выпуска |
|---|---|
| Привет | Пока |
| Привет1 | |
| Привет2 | Пока1 |
| Привет3 | Пока2 |
Улучшаем внешний вид мобильного меню
Эта статья для тех, кто хочет немного улучшить внешний вид мобильного меню. Что можно сделать? Отцентровать пункты меню. В принципе
Улучшаем поиск по сайту
Изначально виджет поиска в теме можно установить в правой колонке Предлагаю один из вариантов как изменить внешний вид поиска, а
Метки под записью
По умолчанию под каждой записью создаётся несколько меток, указывающих определённое значение. Так же эти метки можно назвать мета данными. Не
Источник
CSS: Оформление таблиц
Рамка таблицы
Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.
Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:
- separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
- collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.
Попробовать »
Размер таблицы
После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding:
Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height, задавая нужные размеры или самой таблице или ячейкам:
Выравнивание текста
По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.
CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align :
- top: текст выравнивается по верхней границе ячейки
- middle: выравнивает текст по центру (значение по умолчанию)
- bottom: текст выравнивается по нижней границе ячейки
Попробовать »
Чередование фонового цвета строк таблицы
При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class, добавляя его к каждой второй строке таблицы:
Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):
Изменение фона строки при наведении курсора
Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.
Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:
Выравнивание таблицы по центру
Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе — за автоматическое выравнивание по центру:
Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:
Источник