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

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

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

impuLse #IT

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

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

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

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