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

Код PHP-сценария для чередования цветов фона строк таблиц, позволяющий видимое разделение информации в таблице

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

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

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

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


.gray {
	background-color:#eeeeee;
}

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


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

/* перечень действий, предназначенных для получения информации из базы данных */
<table>
<?php
// используем стандартную функцию 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
  • 8 524
  • Яндекс.Метрика

Меню сайта

Settings

Performance

CPU Load
60%
CPU Temparature
42°
RAM Usage
6,532 MB

Customer care

Reports

Projects

May 14, 2020

Upcoming events

12:00

Donec laoreet fringilla justo a pellentesque

13:20

Nunc quis massa nec enim

14:00

Praesent sit amet