Мой сайт — моя визитная карточка

Таблица с разными цветами строк

Яблоко фрукт
Картошка овощь
Арбуз ягода
Цветок растение
Вода жидкость
Ртуть металл

Подобную таблицу можно сделать двумя способами. Можно для всех четных строк вручную добавить стиль, подсвечивающий их серым цветом, а можно с помощью циклов и условных операторов сделать это только один раз. Какой способ лучше? Ну, если у вашей таблицы две или три строки, лучше, быть может, и первый. А если строк больше? Если их не один десяток или больше сотни?

Для начала давайте разберемся с условием задачи. Что нужно? Нужно каждой строке, которая является четной изменить цвет фона. Четными числами являются те, которые делятся на 2 без остатка. Значит наша задача сводится к тому, чтобы определить четность строки таблицы. Как это сделать? Ну тут уже результат зависит от того, как вы получаете данные для таблицы. Если вы вручную создаете строки таблицы, то силами одного PHP вам это не сделать. Потребуется задействовать ещё и JavaScript. Если же данные для вашей таблицы вы получаете из базы данных, то PHP вам хватит с головой.

Сперва давайте создадим стиль для подсветки строк в CSS.

.gray {
	background-color:#eeeeee;
}

Теперь смотрите как подсветить четные строки таблицы.

/**
  * Создаем таблицу, каждой четной строке которой 
  * мы присваиваем специальный CSS-класс. Считаем,
  * что данные для таблицы были получены из базы данных
  * В PHP остаток от деления определяется специальным
  * оператором %
  */

/* перечень действий, предназначенных для получения информации из базы данных */
<table>
// используем стандартную функцию PHP и цикл while
$i = 0;
while($row = mysql_fetch_assoc($query)) {
	echo "<tr";
	
	// Если существует остаток от деления на 2, значит строка четная
	// так как номер первой строки у нас 0, а не 1
	if($i%2)	echo " class='gray'";
	echo ">
		<td>". $row['key'] . "</td>
		<td>" . $row['value'] . "</td>
	</tr>
	";
	$i++;
}
	
</table>

Как видите, с помощью всего одной инструкции, проверяющей наличие остатка от деления, мы можем подсветить любое количество строк таблицы. Хотите подсвечивать нечетные строки? Пожалуйста. Просто присвойте начальное значение переменной$i единицу вместо нуля. Хотите подсвечивать каждую третью строку? Проверяйте остаток от деления на 3. Задача совсем не сложная.

Я разместил эту статью: 29.07.2013
Количество просмотров: 3722
Яндекс.Метрика