10 февраля 2016      728      0

Подсветка колонок таблиц с помощью jQuery

columnHover — это плагин jQuery, который организует подсветку столбцов таблицы при наведении курсора. Плагин умеет работать даже с таблицами, имеющими ячейки с параметрами colspan.

В настройках плагина могут изменяться четыре переменные. Вот их названия и тип возможных значений:

  • hoverClass — string — CSS класс, который мы присваиваем ячейкам, когда подсвечиваем их. Значение по умолчанию: hover.
  • eachCell — boolean — подсвечивает колонки таблицы, когда курсор находится над телом или «футером» таблицы. Если параметр отключен, столбцы подсвечиваются только при наведении курсора на заголовок таблицы. Значение по умолчанию: false.
  • includeSpans — boolean — параметр указывает, нужно ли подсвечивать ячейки с параметром colspan. Значение по умолчанию: true.
  • ignoreCols — array — массив чисел. Указывает, какие колонки таблицы не нужно подсвечивать. Индексация начинается с 1! Значение по умолчанию: [].

Простая подсветка

Чтобы сделать самую простую подсветку, нужно воспользоваться функцией columnHover()

$('#table').columnHover(); 

Результат демонстрирует подсветку колонок при наведении на заголовки таблицы. Так как мы не указали никаких параметров, скрипт будет работать с настройками по-умолчанию. Из всех ключевых настроек стоит обратить на класс hover, присваиваемый подсвечиваемым клеткам. Таким образом, для подсвечиваемых ячеек нужно задать свои свойства по селектору td.hover (обратите внимание, именно через точку, а не двоеточие).

Первая настройка

Теперь сделаем простую настройку скрипта. Все параметры передаются в JSON-формате.

$('#table').columnHover({eachCell:true, hoverClass:'betterhover'}); 

Мы изменили значение eachCell на true, тем самым включив подсветку при наведении курсора на любую ячейку. Ну а hoverClass изменили на betterhover. Теперь стили подсвечиваемых ячеек стоит описать с помощью селектора td.betterhover.

Работа с collspan

Теперь изменим структуру таблицы так, чтобы в ней появились ячейки с параметром colspan.

Теперь посммотрим, что получится, если мы отключим параметр includeSpans.

$('#table').columnHover({eachCell:true, hoverClass:'betterhover', includeSpans:false}); 

Выключение подсветки для заданных колонок

Ну и напоследок проверим работу свойства ignoreCols. Попробуем выключить подсветку для столбцов C+, C-, D+, D-. Они у нас под порядковыми номерами 5, 6, 7, 8. Так и напишем в коде:

$('#table').columnHover({eachCell:true, hoverClass:'betterhover', ignoreCols: [5, 6, 7, 8]}); 

Кстати, если добавить ещё подсветку и ячейкам в строке посредством обычного css, получится интересный эффект перекрестия.

Сейчас у нас в стилях находится примерно такой код:

td:hover, td.betterhover {
		стили подсвечиваемых ячеек
	}

Добавляем ещё один селектор к этим стилям:

td:hover, td.betterhover, tr:hover td {
		стили подсвечиваемых ячеек
	}

На этом всё, урок закончен.

Все темы на сайте

© 2017 BorPost · Копирование материалов сайта без разрешения запрещено