$("#products tbody > tr").filter(":even").css({"background" : "#ddd"}).addClass("even");​​​​​​​​​​​​​​​​
		
			

 

Давайте разберемся, что здесь происходит. Первым делом идет селектор $("#products tbody > tr"). Мы обращаемся к нашей таблице по её ID - это делается с помощью селектора "#products", после чего мы указываем "tbody > tr". Такой селектор отбирает все элементы <TR>, то есть ряды нашей таблицы, которые содержатся внутри тега <TBODY>, т.е. тела нашей таблицы, которое, в свою очередь, содержится внутри таблицы с ID="products". Если вернуться к п.1, где представлена разметка нашей таблицы, то всё станет понятно - мы просто выбрали все ряды нашей таблицы. Далее мы применяем к набору, содержащему все ряды таблицы метод filter(), передавая ему в качестве параметра строку с псевдоселектором ":even". Это позволяет отфильтровать ряды таблицы и выбрать из них только те, которые являются чётными (в переводе с английского "even" значит "четный"). Далее, к уже отфильтрованным рядам таблицы мы применяем метод css(), который устанавливает динамически CSS-стиль для выбранных элементов. В методе css(), мы устанавливаем для отобранных предыдущим селектором filter() рядов цвет фона - в серый. Последним в цепочке вызовов идет добавление класса "even" к нашему набору рядов. Поскольку мы отфильтровали чётные ряды, нам желательно их как-то "пометить", т.е. сохранить признак чётности. Для этого мы и добавляем им класс "even".

 

Итак, мы одной строчкой на jQuery превратили нашу таблицу в таблицу-зебру! Ощутите мощь jQuery :) Давайте теперь посмотрим, как добавить к таблице красивый эффект наведения мыши - когда мы будем проводить мышью над рядом таблицы, цвет фона этого ряда изменится. Такой эффект добавляет динамику в таблицу и улучшает её читабельность. Итак, напишем следующий код:

 

			
				$("#products tbody > tr").hover(function() {
			
				    $(this).css("background", "#C1DAD6");    
			
				}, function() {
			
				    oldBgColor = $(this).hasClass("even") ? "#ddd" : "#eee";
			
				    $(this).css("background", oldBgColor);
			
				});