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

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

Отвечайте

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

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

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

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

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

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

impuLse #IT

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

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

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

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