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>

- Proprietati si metode pentru randuri <tr> si celule <td>


- 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:
Aici va fi adaugat de JavaScript tabelul creat cu DOM

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
Tabele HTML cu DOM

Last accessed pages

  1. Prezentul simplu - Exercitii si teste incepatori (17649)
  2. Verbe - Exercitii si teste engleza incepatori (8804)
  3. Exercitii engleza - English Tests and exercises - Grammar (25753)
  4. Gramatica limbii engleze - Prezentare Generala (101148)
  5. Viitor simplu si continuu - Future Tense Simple and Continuous (18966)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3160)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2345)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1783)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1367)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1307)