Интерактивная подсветка строк в таблице

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

Для реализации данного решения буду использовать javascript библиотеку jQuery, как наиболее простую и распространенную. Логика работы будет следующей, мы будем отслеживать событие hover на строках таблицы и при его срабатывании присваивать данной строке класс, в котором у нас будет задан цвет подложки. Сразу зададим класс:

.hover { background:#f2f2f2 !important; }

Единственный момент, на который я хочу обратить особое внимание, что в моем решении будет исключена первая строка таблицы путем использования селектора not(':first'), так как я предполагаю, что это строка является заголовочной и я не хочу, чтобы к ней применялась подсветка. Данный селектор можно или убрать или модифицировать под себя, например, когда в таблице несколько заголовочных строк. Не забываем, что у нас должна быть подключена библиотека jQuery.

$(document).ready(function(){
	$('table tr').not(':first-child').hover(function () {
		$(this).addClass('hover');
	},function () {
		$(this).removeClass('hover');
	});
});

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

Никого ни к чему не призываю, но хочу напомнить, что сайты надо делать удобными для пользователей. И даже такая мелочь существенно улучшит удобство пользование сайтом. Помните об удобстве посетителей :)