• Инструменты для разработчика

    • Самые удобные инструменты для разработчика, которые облегчат жизнь любого как начинающего так и продвинутого разработчика. Украшатели, уменьшители, конвертеры кодов. Доменные инструменты. Всё в одном комплекте.
  • Использование BB кодов. Тут указаны существующие BB коды на форуме.

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

impuLse #IT

Администратор
Команда форума
Регистрация
12.03.2015
Сообщения
915
Репутация
449
Баллы
104
Награды
2
Адрес
mySQL
Лучшие ответы
0
  • Супер постер
  • Постер
Главным отличием данного скрипта от рассмотренного ранне является то, что при повторном клике по выделенной строке или при убирании курсора мыши со строки, выделение цветом пропадет и строке возвращается ее первоначальный цвет (тот, который у нее был до выделения). Изначально строки таблицы могут быть разных цветов, на работу скрипта это не влияет.

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

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

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

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

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