Comunitatea Europa Counter Strike

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>

Cod: Selectaţi tot

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

Cod: Selectaţi tot

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

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>

Cod: Selectaţi tot

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

Cod: Selectaţi tot

var tabel = document.getElementById('id_tabel');
var nr_coloane = tabel.rows[0].cells.length;

Cod: Selectaţi tot

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

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];
}

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

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

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>