Tablele HTML cu DOM JS

[MArian]

Tabelele sunt elemente comune in HTML, fapt pentru care DOM (Document Object Model) are functii specifice pentru lucrul cu tabele. Astfel, versiunea DOM pentru HTML contine mai multe proprietati si metode pentru a crea si manipula tabele, randuri si coloane din ele.
- Proprietati si metode pentru si

rows - Returneaza un Array cu randurile din tabel.
tBodies - Returneaza un Array cu toate corpurile din tabel.
insertRow(pozitie) - Adauga un rand nou in tabel, la pozitia indicata din matricea cu randurile.
deleteRow(pozitie) - Sterge randul din pozitia indicata.
- Proprietati si metode pentru randuri si celule

cells - Returneaza un Array cu celulele din randul selectionat.
insertCell(pozitie) - Adauga o noua celula in randul selectionat, la pozitia indicata din matricea cu celulele.
deleteCell(pozitie) - Sterge celula de la pozitia indicata, din randul selectionat.

- Impreuna cu aceste proprietati si metode DOM pentru tabele se folosesc si celelalte functii DOM mai generale pentru lucrul cu elemente HTML, precum: "getElementById()", "createElement()", "setAttribute()", si altele.
1. Lucru cu elemente din tabel, folosind DOM JavaScript

In continuarea acestui tutorial sunt prezentate cateva exemple de lucru cu elementele unui tabel XHTML, utilizand proprietatile si metodele specifice DOM.
Pentru a nu incarca prea mult pagina si exemplele, nu mai e adaugat si tag-ul "" ce trebuie sa contina codul JavaScript al acestor exemple.
Pentru aceste exemple se foloseste urmatorul tabel:
- Codul XHTML al tabelului de lucru


Titlu tabelului



Titlu coloana 1
Titlu coloana 2





Titlu coloana 1
Titlu coloana 2




Titlu rand 1
Celula 1 - 1
Celula 1 - 2


Titlu rand 2
Celula 2 - 1
Celula 2 - 2



- Acest cod va afisa urmatorul tabel.
Titlu tabelului
Titlu coloana 1 Titlu coloana 2
Titlu coloana 1 Titlu coloana 2
Titlu rand 1 Celula 1 - 1 Celula 1 - 2
Titlu rand 2 Celula 2 - 1 Celula 2 - 2
1. Obtinerea numarului de randuri din tabel
var tabel = document.getElementById('id_tabel');
var nr_rows = tabel.rows.length;
- "nr_rows" va avea valoarea "4" (include si randurile pt. si ).

2. Obtinerea numarului de corpuri (sectiuni ) din tabel
var tabel = document.getElementById('id_tabel');
var nr_corps = tabel.tBodies.length;
- "nr_corps" va avea valoarea "1".

3. Obtinerea numarului de randuri din prima sectiune
var tabel = document.getElementById('id_tabel');
var nr_rows_corp = tabel.tBodies[0].rows.length;
- "nr_rows_corp" va avea valoarea "2".

4. Stergerea primului rand din tabel si a primului rand din
var tabel = document.getElementById('id_tabel');
tabel.deleteRow(0); // Sterge primul rand din tabel
tabel.tBodies[0].deleteRow(0); // Sterge primul rand din primul

5. Stergerea coloanei doi din primul rand al corpului
var tabel = document.getElementById('id_tabel');
tabel.tBodies[0].rows[0].deleteCell(1);

6. Obtinerea numarului de coloane (ceule) din primul rand al corpului
var tabel = document.getElementById('id_tabel');
var nr_coloane = tabel.rows[0].cells.length;
- "nr_coloane" va avea valoarea "3".

7. Obtinerea textului din celula 2 a primului rand din
var tabel = document.getElementById('id_tabel');
var text_col2_row1 = tabel.tBodies[0].rows[0].cells[1].innerHTML;
- "text_col2_row1" va avea valoarea "Celula 1 - 1".

8. Parcurgerea randurilor din tabel
var tabel = document.getElementById('id_tabel');
var randuri = tabel.rows;
for(var i=0; i

[IN LOVE]

Multumim frumos mai asteptam si altele !