Afisare date Array in randuri cu stiluri diferite

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

- 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.

<<-Preluare date din formular .. -- Upload mai multe fisiere->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?

block list-item inline-block

.some_class {
  display: list-item;
}

Care instructiune JavaScript transforma un obiect in sir JSON.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)

lived living liveing

I`m living here.
- Traiesc /Locuiesc aici.

Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?

vivió vivido viviendo

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.

Afisare date Array in randuri cu stiluri diferite

Curs Php-mysql

- Codul PHP

- Codul pt. proprietatile de stil CSS

Exemplu 2 - cu WHILE si afisare in randuri de tabel

- Codul PHP

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Last accessed pages

Popular pages this month