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 afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Tabele HTML cu DOM

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (46914)
  2. Gramatica limbii engleze - Prezentare Generala (92215)
  3. Verbe reflexive 1 (2340)
  4. Substantivul din limba engleza - The Noun (22919)
  5. I sau Me (3223)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2260)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (872)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (718)
  4. Exercitii engleza - English Tests and exercises - Grammar (675)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (606)