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 paginaDescriere
0 marplo.netCursuri 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.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
Afisare date Array in randuri cu stiluri diferite

Last accessed pages

  1. Prezentul simplu - Exercitii si teste incepatori (19012)
  2. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (27165)
  3. Verbe Dinamice si Statice - Dynamic and Static Verbs (3779)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (36736)
  5. Gramatica limbii engleze - Prezentare Generala (104815)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (2765)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2257)
  3. Gramatica limbii engleze - Prezentare Generala (2080)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1724)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1440)