Rated articles


View all rated articles

Login / Sign Up


Enter site:
Login: 
Password: 

First time here?
 
Register [?]:
Registering allows you:
  • Purchase products from the product catalog and access them any time.
  • Ask questions to another specialists in IT
  • Publish your own Joomla extensions, soft or other products if you are developer or distributor
  • Add interesting weblinks and access them from any place
  • Watch the updates of the site and have special abilities that guests don't have
  • Watch the news of the service and new articles and get knowledge
Choose login:
Your Email:
Enter the result of operation (in digits):
28 - 9 = ? Update
Фильтрация элементов
jQuery - используем метод filter(). Создаем таблицу-"зебру" и добавляем эффект наведения на ряд таблицы PDF Print E-mail
Written by Максим   
Friday, 27 April 2012 11:16
Liked:
19


Did not like: 5

В этой статье я покажу как с помощью метода filter() можно одной строчкой на jQuery превратить вашу обычную таблицу в таблицу-"зебру". Этот эффект часто используется на многих сайтах для того, чтобы таблицу было удобнее читать - ряды такой таблицы немного отличаются по цвету. Также мы научимся добавлять эффект наведения мышью на ряд нашей таблицы - при таком наведении цвет фона для ряда таблицы будет меняться, а при "уходе" мыши с ряда - цвет вернется в начальный.

1. HTML-разметка

Первым делом создадим какую-нибудь простую таблицу. Пусть для примера наша таблица содержит список продуктов и цену на них:


	 

	<table id="products" bgcolor="#eee" cellspacing="3" cellpadding="5" width="100%" border="3" bordercolor="#fff">

	<thead bgcolor="#aaa">

	    <th>Продукт</th>

	    <th>Стоимость</th>    

	</thead>

	<tbody>

	    <tr>

	        <td>Молоко</td>

	        <td>48 руб.</td>

	    </tr>

	    <tr>

	        <td>Сыр</td>

	        <td>98 руб.</td>

	    </tr>

	    <tr>

	        <td>Мясо</td>

	        <td>260 руб.</td>

	    </tr> 

	    <tr>

	        <td>Макароны</td>

	        <td>34 руб.</td>

	    </tr>

	    <tr>

	        <td>Хлеб</td>

	        <td>25 руб.</td>

	    </tr>     

	</tbody>

	</table>​
 
Как видим, в нашей таблице 5 строк, в каждой из которых описан продукт и его цена. Цвет фона таблицы - серый и ширина - на всю область. Далее - немного стилизуем нашу таблицу с помощью CSS.

2. Добавляем CSS-стили для таблицы

Сделаем так, чтобы для нашей таблицы был установлен шрифт "Tahoma" высотой 10 пунктов. Также для удобочитаемости содержимого таблицы увеличим отступы от границ ячеек внутрь до 5 пикселей. Шрифт заголовка таблицы сделаем полужирным.
 
	
		#products { padding: 5px; font-family: "Tahoma"; font-size:10pt; }
	
		#products thead th { padding:5px; font-weight:bold; }
	
		#products tbody td { padding:5px; }

3. Раскрашиваем ряды таблицы

Следующим шагом добавим код на jQuery, который позволит раскрасить строки нашей таблицы, превратив её в "зебру":
 
		
			$("#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);
			
				});
 
А теперь немного пояснений. Мы, опять же, начинаем с того, что выбираем все ряды таблицы - этого нам помогает достичь селектор $("#products tbody > tr"). Далее мы "вешаем" на каждый отобранный ряд таблицы по два обработчика на события "наведение мышью на область" и "уход мыши из области". Эти обработчики - две последовательные функции, расположенные внутри hover(). Первая - это наведение на ряд, вторая, соответственно, уход мыши из области ряда таблицы. При наведении мы меняем цвет фона для ряда. А при уходе курсора из области ряда (вторая функция) - получаем "старый цвет" фона. Помните мы в первой строчке добавляли к каждому ряду класс "even"? Так вот, он нам здесь и пригодится. Если ряд имеет класс "even", значит он чётный и мы вернём для него один цвет - "#ddd", в противном случае вернём цвет "#eee". Далее - просто устанавливаем этот цвет в качестве фона для ряда.

Демо

Друзья, собственно, это всё. Привожу демонстрацию проделанной нами работы:
 
 

 

Last Updated on Tuesday, 19 February 2013 14:53
 


Found Error?

Система Orphus

Payment Methods

Яндекс.Деньги
www.megastock.ru
Здесь находится аттестат нашего WM идентификатора 207935874510
Проверить аттестат

Site Statistics

Яндекс.Метрика

Our Pages


Allineed.Ru © 2009-2012 - Allineed.Ru - ответы на IT вопросы, статьи о разработке, IT и программном обеспечении. При использовании материалов сайта ссылка обязательна. Использование данного сайта и любой его части означает принятие условий Пользовательского Соглашения.
Allineed.Ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.