Задавайте вопросы

Задавайте вопросы и получайте ответы от нашего сообщества

Отвечайте

Отвечайте на вопросы и станьте экспертом по своей теме

Свяжитесь с администрацией

Наши специалисты готовы ответить на ваши вопросы

jQuery JQuery подсветка строк таблицы

Информация о теме

О теме Здравствуйте, вы читаете тему JQuery подсветка строк таблицы созданную в в разделе JavaScript пользователем impuLse #IT. Эта тема была просмотрена 2 252 раз(а), получила 0 комментариев и 0 очки реакции...
Название категории JavaScript
Название темы JQuery подсветка строк таблицы
Автор темы impuLse #IT
Дата начала
Ответы
Просмотры
Количество реакций
Последнее сообщение impuLse #IT

impuLse #IT

Администратор
Команда форума
Регистрация
12.03.2015
Сообщения
899
Реакции
446
Баллы
35
Лучшие ответы
0
  • Автор темы
  • Администратор
  • #1
Главным отличием данного скрипта от рассмотренного ранне является то, что при повторном клике по выделенной строке или при убирании курсора мыши со строки, выделение цветом пропадет и строке возвращается ее первоначальный цвет (тот, который у нее был до выделения). Изначально строки таблицы могут быть разных цветов, на работу скрипта это не влияет.

Теперь обратите внимание на таблицу, расположенную ниже.

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

Для того чтобы реализовать подобную таблицу с подсвечивающими строками и мультивыбором строк на своем сайте, Вам понадобится использовать заранее заготовленные стили с цветами для строк. Для этого вставьте на своем сайте между тегами <head> и </head> следующий код:
HTML:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Таблицу, к которой мы будем применять эффект подсвечивания строк, следует добавить следующим образом:
HTML:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Далее для работы скрипта нам потребуется библиотека jQuery. Если на Вашем сайте библиотека еще не подключена, то следует ее подключить следующим образом:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Теперь остается добавить наш скрипт, который и будет отвечать за подсвечивание строк таблицы под курсором мышки и выделять их по клику. Для этого просто скопируйте следующий JavaScript код к себе на сайт:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Если Вы все скопировали правильно, то в результате у Вас должна получиться точно такая же таблица, как и в примере выше, при наведении на строки которой данные строки будут выделяться желтым фоном, а при клике на них, фон станет зеленоватым. При повторном клике по зеленоватым строкам, зеленоватый цвет пропадет и строки приобретет свой первоначальный цвет.

Если вдруг Вам потребуется подсвечивать и выделять цветом не строки, а отдельные ячейки в таблице, то Вам просто потребуется в двух местах после tr:not(.first_tr) добавить td.

Также можете онлайн проверит сами тут:
Пожалуйста, Вход или Регистрация для просмотра содержимого URL-адресов!
 
Верх Низ