Cand sunt afisate datele continute in elementele unui Array, aceasta se face in general prin parcurgerea acelui Array cu una din instructiunile: "for()" sau "while()" (pt. Array secvential) ori "foreach()" (pt. Array asociativ).
In multe cazuri afisarea acestor date se face pe cate un rand corespunzator fiecarui element din matrice (Array).
In acest tutorial este aratat modul de afisare a datelor din Array in randuri care sa aiba stiluri CSS diferite (culoare, fundal, font, etc.).
Ideea e urmatoarea: - Trebuie ca in timpul parcurgerii elementelor din Array sa se acorde fiecarui rand cate un atribut class diferit de precedentul.
- Pentru aceasta se defineste o variabila indice inainte de a efectua parcurgerea, aceasta variabila trebuie adaugata in bucla instructiunii de parsare (parcurgere si prelucrare) si de fiecare data incrementata cu o unitate, apoi se acorda un atribut "class" randului in functie de restul impartirii valorii acelei variabile la numarul de clase (pt. stil) ce trebuie sa alterneze.
Iata un exemplu din care se poate intelege mai bine. Se da o matrice cu mai multe elemente ce contin cate un sir text. Matricea va fi parcursa cu instructiunea "for()" iar sirurile sunt afisate pe randuri cu 2 stiluri CSS diferite ce alterneaza unul dupa altul. Alte explicatii gasiti in cod.
- Codul PHP
<?php
// Array secvential cu sirurile text ce trebuie afisate
$aray = array(
0=>'marplo.net - Cursuri si tutoriale, Jocuri Flash si prezentare Anime-uri.',
1=>'marplo.net/php-mysql/ - Curs gratuit, scripturi si tutoriale php-mysql.',
2=>'marplo.net/ajax/ - Curs gratuit, lectii si tutoriale pentru invatat Ajax.',
3=>'marplo.net/engleza/ - Lectii gramaticale, exercitii, e-books si resurse multimedia pentru invatarea limbii engleze.'
);
// Array cu clasele pt. stilurile CSS ce trebuie alternate (aici doua)
$css_clas = array('clas1', 'clas2');
$nr_clas = count($css_clas); // Preia numarul de elemente (clase) ce trebuie alternate
$i_clas = 0; // Indice ce va fi folosit pt. alternarea claselor in randuri
// Parcurge matricea $aray
for($i=0; $i<count($aray); $i++) {
// Se obtine restul impartirii indecelui $i_clas la numarul de clase pt. stil, $nr_clas
$key_clas = $i_clas % $nr_clas;
$i_clas++; // Incrementeaza cu o unitate indicele pt. alternare
// Se afiseaza fiecare rand in cate un tag DIV cu atribut "class" a carui valoare e preluata din $css_clas, in functie de $key_clas
echo '<div class="'. $css_clas[$key_clas]. '">'. $aray[$i]. '</div>';
}
?>
- Restul impartiri ce e stocat in "$key_clas" va fi intodeauna 0 sau 1 (daca $nr_clas are valoarea 2, ce reprezinta numarul de clase de stil), si astfel va alterna mereu valoarea data atributului "class" din DIV intre primul si al doilea element din "$css_clas".
- Apoi, intr-un fisier extern CSS sau intr-un tag <style type="text/css">...</style> din sctiunea HEAD a paginii HTML se adauga proprietati CSS pentru clasele "clas1" si "clas2" (din matricea "$css_clas"), dupa cum vedeti mai jos.
-
Daca doriti mai multe de doua stiluri CSS care sa alterneze in randurile afisate, trebuie doar adaugate valori in matricea "$css_clas" si respectiv in codul cu proprietatile CSS.
- Codul pt. proprietatile de stil CSS
<style type="text/css">
.clas1 {
background-color: #d2fed3;
padding:2px;
color:blue;
}
.clas2 {
background-color: #fefebe;
padding:2px;
color:green;
}
</style>
- Acest exemplu va afisa urmatorul rezultat
marplo.net - Cursuri si tutoriale, Jocuri Flash si prezentare Anime-uri.
marplo.net/php-mysql/ - Curs gratuit, scripturi si tutoriale php-mysql.
marplo.net/ajax/ - Curs gratuit, lectii si tutoriale pentru invatat Ajax.
marplo.net/engleza/ - Lectii gramaticale, exercitii, e-books si resurse multimedia pentru invatarea limbii engleze.
Exemplu 2 - cu WHILE si afisare in randuri de tabel
Deoarece parcurgerea cu WHILE este putin diferita de "for()" si adesea datele sunt afisate si in randuri de tabel, iata inca un exemplu in care elementele dintr-un Array secvential (multiplu) sunt parcurse cu WHILE si afisate intr-un tabel cu randuri ce au 2 stiluri CSS ce alterneaza una dupa cealalta.
- Codul PHP
<?php
// Array secvential multiplu cu datele ce trebuie afisate intr-un tabel
$aray = array(
0=>array('marplo.net', 'Cursuri si tutoriale, Jocuri Flash si prezentare Anime-uri.'),
1=>array('marplo.net/php-mysql/', 'Curs gratuit, scripturi si tutoriale php-mysql.'),
2=>array('marplo.net/ajax/', 'Curs gratuit, lectii si tutoriale pentru invatat Ajax.'),
3=>array('marplo.net/engleza/', 'Lectii gramaticale, exercitii, e-books si resurse multimedia pentru invatarea limbii engleze.')
);
// Array cu clasele pt. stilurile CSS ce trebuie alternate (aici doua)
$css_clas = array('clas1', 'clas2');
$nr_clas = count($css_clas); // Preia numarul de elemente (clase) ce trebuie alternate
$i_clas = 0; // Indice ce va fi folosit pt. alternarea claselor in randuri
// Parcurge matricea $aray cu WHILE
// Se creaza codul pt. inceputul tabelului HTML si al primului rand cu titlurile
$tabel_html = '<table align="center"><tr><th>Nr.</th><th>Adresa pagina</th><th>Descriere</th></tr>';
$i = 0; // Indice de parcurgere
while($i<count($aray)) {
// Se obtine restul impartirii indecelui $i_clas la numarul de clase pt. stil, $nr_clas
$key_clas = $i_clas % $nr_clas;
$i_clas++; // Incrementeaza cu o unitate indicele pt. alternare
// Se adauga in tabel randul cu elementele din $aray
// Fiecare rand (tag <tr>) cu un atribut "class" a carui valoare e preluata din $css_clas, in functie de $key_clas
$tabel_html .= '<tr class="'. $css_clas[$key_clas]. '"><td> '. $i. ' </td><td>'. $aray[$i][0]. '</td><td>'. $aray[$i][1]. '</td></tr>';
$i++; // Incrementeaza indicele de parcurgere, ca sa treaca la urmatorul element
}
$tabel_html .= '</table>'; // Se adauga (dupa terminarea lui WHILE) inchiderea tabelului HTML
echo $tabel_html; // Se afiseaza tabelul obtinut
?>
- La fel ca si in primul exemplu, trebuie definite proprietatile CSS pentru "clas1" si "clas2".
- Acest al doilea exemplu va afisa urmatorul tabel (
cu proprietatile CSS definite la primul exemplu).
| Nr. | Adresa pagina | Descriere |
|---|
| 0 | marplo.net | Cursuri si tutoriale, Jocuri Flash si prezentare Anime-uri. |
| 1 | marplo.net/php-mysql/ | Curs gratuit, scripturi si tutoriale php-mysql. |
| 2 | marplo.net/ajax/ | Curs gratuit, lectii si tutoriale pentru invatat Ajax. |
| 3 | marplo.net/engleza/ | Lectii gramaticale, exercitii, e-books si resurse multimedia pentru invatarea limbii engleze. |
-
Similar pot fi obtinute randuri cu stiluri CSS ce alterneaza si cu date preluate dintr-o baza de date. In loc de parcurgerea unui Array definit in script se parcurge, tot cu WHILE, matricea cu datele returnate de serverul bazei de date.