[Tutorial JS]Tabele HTML in DOM JavaScript

#1
Nume Tutorial:Tabele HTML in DOM JavaScript
Descriere: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.
Download:
Autor:
Sursa (Link-ul oficial):
tutorialeweb.net
Propria parere:Nu l-am incercat.
Tutorialul:
- 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

Cod: Selectaţi tot

<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>
1. Obtinerea numarului de randuri din tabel

Cod: Selectaţi tot

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

Cod: Selectaţi tot

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>

Cod: Selectaţi tot

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>

Cod: Selectaţi tot

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>

Cod: Selectaţi tot

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>

Cod: Selectaţi tot

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

Cod: Selectaţi tot

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

Cod: Selectaţi tot

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>

Cod: Selectaţi tot

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';
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).

Cod: Selectaţi tot

<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', 'http://www.marplo.net/php-mysql', 'Curs gratuit, scripturi si tutoriale PHP-MySQL'],
 ['Limbi straine', 'http://www.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.[/b]
Imagine

Înapoi la “Tutoriale JS”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 3 vizitatori