Tabele HTML cu DOM

Curs Javascript

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 <table> si <tbody>

• rows - Returneaza un Array cu randurile din tabel.
• tBodies - Returneaza un Array cu toate corpurile <tbody> 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 <tr> si celule <td>

• 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 "<script type="text/javascript"></script>" ce trebuie sa contina codul JavaScript al acestor exemple.
Pentru aceste exemple se foloseste urmatorul tabel:

- Codul XHTML al tabelului de lucru

<table id="id_tabel" align="center" width="390">
 <caption><u>Titlu tabelului</u></caption>
 <thead>
  <tr>
   <th></th>
   <th>Titlu coloana 1</th>
   <th>Titlu coloana 2</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <th></th>
   <th>Titlu coloana 1</th>
   <th>Titlu coloana 2</th>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <th>Titlu rand 1</th>
   <td>Celula 1 - 1</td>
   <td>Celula 1 - 2</td>
  </tr>
  <tr>
   <th>Titlu rand 2</th>
   <td>Celula 2 - 1</td>
   <td>Celula 2 - 2</td>
  </tr>
 </tbody>
</table>

- 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. <thead> si <tfoot>).

2. Obtinerea numarului de corpuri (sectiuni <tbody>) 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 <tbody>

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

var tabel = document.getElementById('id_tabel');
tabel.deleteRow(0);         // Sterge primul rand din tabel
tabel.tBodies[0].deleteRow(0);         // Sterge primul rand din primul <tbody>

5. Stergerea coloanei doi din primul rand al corpului <tbody>

var tabel = document.getElementById('id_tabel');
tabel.tBodies[0].rows[0].deleteCell(1);

6. Obtinerea numarului de coloane (ceule) din primul rand al corpului <tbody>

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

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<randuri.length; i++) {
    var rand = randuri[i];
}

9. Parcurgerea tuturor randurilor si celulelor din tabel

var tabel = document.getElementById('id_tabel');
var randuri = tabel.rows;

// Incepe parcurgerea randurilor
for(var i=0; i<randuri.length; i++) {
    var rand = randuri[i];
    var celule = rand.cells;

    // Incepe parcurgerea celulelor din fiecare rand parcurs
    for(var j=0; j<celule.length; j++) {
        var coloana = celule[j];
        // ... Cod pt. lucru cu celula parcursa
    }
}

10. Adaugarea unui rand nou (al treilea) in prima sectiune <tbody>

var tabel = document.getElementById('id_tabel');

tabel.tBodies[0].insertRow(2);         // Se adauga al treilea rand

var cel_th = document.createElement("th");         // Se creaza o celula de tip <th> (pentru titlu)
cel_th.innerHTML = 'Titlu rand 3';         // Se adauga un text in celula
tabel.tBodies[0].rows[2].appendChild(cel_th);         // Se adauga celula creata, in randul 3 din primul <tbody>

// Se creaza celelalte 2 celule <td>, cu text in ele (comform structurii tabelului) si se adauga in randul 3
tabel.tBodies[0].rows[2].insertCell(1);
tabel.tBodies[0].rows[2].cells[1].innerHTML = 'Celula 3 - 1';
tabel.tBodies[0].rows[2].insertCell(2);
tabel.tBodies[0].rows[2].cells[2].innerHTML = 'Celula 3 - 2';

- Acest cod face ca tabelul de la inceput sa arate asa:

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
Titlu rand 3	Celula 3 - 1	Celula 3 - 2

2. Creare tabel cu DOM JavaScript

In exemplu urmator va fi creat un tabel HTML de la zero, folosind functiile specifice DOM.
- Tabelul va contine <caption>, <thead>, <tfoot>, <tbody>, 2 randuri cu 3 coloane (explicatiile sunt in cod).

<div id="id_div">Aici va fi adaugat de JavaScript tabelul creat cu DOM</div>

<script type="text/javascript"><!--
var tabdom = document.createElement('table');        // Creaza <table>

// Se defineste o functie pt. adaugarea atributelor in <table>, adaugare <caption> si <tbody>
// "arr_atr" contine o un Array asociativ cu elemente pt. atribut=valoare din <table>, iar "titl_cap" textul din <caption>
function set_table(arr_atr, titl_cap) {
  // Se parcurge matricea "arr_atr" si se definesc atributele dupa elementele din ea
  for (var i in arr_atr) { tabdom.setAttribute(i, arr_atr[i]); }

  // Se creaza <caption> si se adauga in tabel (tabdom)
  var caption = document.createElement('caption');
  caption.innerHTML = titl_cap;
  tabdom.appendChild(caption);

  // Creaza <tbody> si-l adauga in tabdom
  var tbody = document.createElement('tbody');
  tabdom.appendChild(tbody);
}

// Functia pt. crearea zonelor <thead> si <tfoot>
// "tip_thf" da tipul zonei, "arr_txtt" va fi un Array cu textul ce trebuie adaugat in <th>
// Numarul elementelor din "arr_txtt" da numarul de coloane cu <th>
function set_thf(tip_thf, arr_txtt) {
  // Se creaza si adauga in tabel (tabdom) sectiunea specificata in "tip_thf"
  var ad_thf = document.createElement(tip_thf);
  tabdom.appendChild(ad_thf);

  ad_thf.insertRow(0);         // Adauga un rand in sectiunea creata

  // Se parcurge "arr_txtt" pt. creare si adaugare <th> in randul creat
  for(var i=0; i<arr_txtt.length; i++) {
    var ad_th = document.createElement('th');
    ad_th.innerHTML = arr_txtt[i];
    ad_thf.rows[0].appendChild(ad_th);
  }

  // Daca "tip_thf" este 'thead', se apeleaza inca o data functia pt. creare si <tfoot>
  if(tip_thf=='thead') set_thf('tfoot', arr_txtt);
}

// Functia pt. crearea randurilor <tr> cu celulele <td>, in <tbody>
// Al treilea parametru "arr_rowcel" reprezina un Array multiplu (2 nivele), pt. nr. randuri si textul din celule
// Numarul de elemente din "arr_rowcel" va da si numarul de coloane ce trebuie adaugate in rand
function in_table(arr_rowcel) {
  // Se parcurge primul nivel din "arr_rowcel"
  for(var i=0; i<arr_rowcel.length; i++) {
    tabdom.tBodies[0].insertRow(i);         // Se adauga rand in tabel (tabdom)
    var arr_cel = arr_rowcel[i];         // Preia Array-ul intern, cu datele pt. celule

    // Parcurge matricea pt. celule si le creaza in randul curent (i), cu textul din elementele "arr_cel"
    for(var j=0; j<arr_cel.length; j++) {
      tabdom.tBodies[0].rows[i].insertCell(j);
      tabdom.tBodies[0].rows[i].cells[j].innerHTML = arr_cel[j];
	}
  }
}

// Se definesc variabilele cu datele tabelului
var titl_cap = '<u>Titlu tabelului creat cu DOM JS</u>';
var arr_atr = {'id':'id_tabdom', 'align':'center', 'cellpadding':2, 'width':'99%'};       // Matricea cu atributele (in format JSON)
var arr_txtt = ['Categorie Site', 'Adresa URL', 'Descriere'];         // Titlurile pt. <thead> si <tfoot>
var arr_rowcel = [
 ['Programare Web', 'https://marplo.net/php-mysql', 'Curs gratuit, scripturi si tutoriale PHP-MySQL'],
 ['Limbi straine', 'https://marplo.net/engleza', 'Cursuri gratuite, exercitii si rersurse pentru invatat limba engleza'],
];          // Array multiplu (format JSON) cu datele pt. celule

// Se apeleaza functiile necesare pt.: creare tabel, adaugare 'thead - tfoot' si a trei pt. creare randuri si celule
set_table(arr_atr, titl_cap);
set_thf('thead', arr_txtt);
in_table(arr_rowcel);

document.getElementById('id_div').appendChild(tabdom);         // Adauga tabelul in tag-ul ce are id="id_div"
//--></script>

- Functiile necesare fiind deja create, pot fi usor adaugate noi coloane sau si randuri; din variabilele cu datele tabelului.
- Daca adaugati acest script intr-o pagina web, veti obtine tabelul care apare mai jos dupa ce dati click pe: Tabel cu DOM JS

Aici va fi adaugat de JavaScript tabelul creat cu DOM

Titlu tabelului creat cu DOM JS

Categorie Site	Adresa URL	Descriere
Categorie Site	Adresa URL	Descriere
Programare Web	https://marplo.net/php-mysql	Curs gratuit, scripturi si tutoriale PHP-MySQL
Limbi straine	https://marplo.net/engleza	Cursuri gratuite, exercitii si rersurse pentru invatat limba engleza

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

.some_class {
  display: list-item;
}

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

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

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

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.