DOM – objektový model dokumentu 7. – vytváření tabulek

Dnešní díl bude věnován představení možností, které máme v DOM k dispozici, pokud chceme pracovat s tabulkami.
Na úvod si pojďme říci něco málo o tabulkách v HTML obecně. Asi každý, kdo pracuje s HTML, zná tuto jednoduchou syntaxi tabulky:

<table>
<tr>
    <td>prvni bunka</td>
    <td>druha bunka</td>
</tr>
<tr>
    <td>treti bunka</td>
    <td>ctvrta bunka</td>
</tr>
</table>

Díky normě HTML 4.0 však máme při vytváření tabulek přece jen více možností. Popisek tabulky můžeme uzavřít do tagu <caption>, pomocí <colgroup> a <col> můžeme vytvořit a skupiny sloupců a sloupce se stejnými vlastnostmi. Obsah tabulky je možné pomocí elementů <thead> (záhlaví), <tfoot> (patička), <tbody> (vlastní tělo tabulky, může jich být i vícero) rozdělit do několika logických částí.

Popisování struktury tabulek v HTML je mimo rámec tohoto článku, nicméně všem, kteří výše uvedené možnosti neznají, doporučuji prostudování této problematiky buď zde na Živě, nebo na Sově v síti, nebo přímo u zdroje. Možnosti DOM pro práci s tabulkami vycházejí právě ze struktury definované normou HTML 4.0 a tak se vám tyto znalosti budou hodit.

Vytvoření tabulky standardním způsobem

Na vytvoření jednoduché tabulky striktně vzato nepotřebujeme nic jiného, než to, co jsme se naučili v minulých dílech - tabulka a její prvky jsou součástí standardní struktury HTML dokumentu a tak můžeme použít zcela standardní nástroje pro tvorbu uzlů. Podívejte se na následující příklad:

<head>
<title>tvorba tabulky</title>
<script type="text/javascript">
      function crEl(name) {
      var elem = document.createElement(name);
      return elem;
  }
function crTx(content) {
      var text = document.createTextNode(content);
      return text;
  }

      function createTable() {
  var table = crEl(`table`);
  var caption = crEl(`caption`);
  var thead = crEl(`thead`);
  var tbody = crEl(`tbody`);
 
  var cpt_txt = crTx(`zkusebni tabulka vytvorena pomoci DOM`);
  caption.appendChild(cpt_txt);
 
  var thead_row = crEl(`tr`);
  var th1 = crEl(`th`);
  var th2 = crEl(`th`);
  th1.setAttribute(`colSpan`, `6`);
  th2.colSpan=`4`;
  th1_txt = crTx(`zahlavi 1`);
  th2_txt = crTx(`zahlavi 2`);
  th1.appendChild(th1_txt);
  th2.appendChild(th2_txt);
  thead_row.appendChild(th1);
  thead_row.appendChild(th2);
  thead.appendChild(thead_row);
     
  var row = new Array;
      for (i=0; i<5; i++) {
      row[i] = crEl(`tr`);
      var cell = new Array;
      var text = new Array;
        for (j=0; j<10; j++) {
        cell[j] = crEl(`td`);
        text[j] = crTx(j);
        cell[j].appendChild(text[j]);
        row[i].appendChild(cell[j]);
        }
      tbody.appendChild(row[i]);
      }
  table.appendChild(caption);
  table.appendChild(thead);
  table.appendChild(tbody);
  table.border=`2`;
  document.getElementsByTagName(`body`)[0].appendChild(table);
  }
    </script>
</head>

<body onload="createTable();">


</body>
</html>

Po načtení prázdného HTML dokumentu je spuštěna funkce createTable(), která vytvoří tabulku a přidá ji do BODY.

Na začátku skriptu jsou dvě jednoduché funkce crEl() a crTx(), které nemají za úkol nic jiného, než zkrátit zdlouhavé vypisování příkazů při vytváření elementů a textových uzlů. Tyto funkce jsou pak využívány ve funkci createTable(). V té jsou na začátku vytvářeny elementy <table>, <caption>, <thead> a <tbody>. Poté je vytvořen textový uzel, který je následně vložen jako dítě elementu <caption>.

V další části je vytvářeno záhlaví tabulky, tedy děti elementu <thead>. Konkrétně se jedná o element <tr>, 2 elementy <th> a jejich textové obsahy. Vše je postupně vloženo pomocí metody appendChild() na své místo, tedy textové uzly do buněk, buňky do řady a řada do záhlaví.

Zajímavý a nový prvek je vidět při porovnání těchto dvou řádků:

th1.setAttribute(`colSpan`, `6`);
th2.colSpan=`4`;

Elementům <th> uložené v proměnných th1 a th2 je nastavován atribut colSpan. Každému ovšem jiným způsobem - u prvního je to univerzální způsob pomocí metody setAttribute() a u druhého pomocí vlastnosti colSpan. Výsledek je tentýž, důležité je však dodržet velká a malá písmena v názvu atributu (či vlastnosti) přesně podle normy W3C. Seznam všech atributů (vlastností) použitelných u jednotlivých prvků tabulky pro čtení i nastavení je uveden na konci tohoto dílu.

V další části skriptu je vytvořen obsah těla tabulky pomocí dvou vnořených cyklů for. Nakonec jsou do elementu <table> vlepeny elementy <caption>, <thead>, <tbody>, je nastaven atribut border tabulky na hodnotu 2 a celá tabulka je umístěna do elementu BODY.

Velmi důležité je nezapomenout při tvorbě tabulky na element <tbody> - pokud se chystáme s tabulkou manipulovat pomocí DOM, mohou se u tabulek, které nemají tělo tabulky, tedy element <tbody>, vyskytnout různé problémy a neočekávané chování.

Metody pro vytváření prvků tabulky - createCaption(), createTHead(), createTFoot(), insertRow() a insertCell().

Tabulku ale můžeme tvořit i za použití některých speciálních metod k tomu určených. Podívejte se, jak vypadá modifikovaná funkce createTable() u druhého příkladu:

function createTable() {
  var table = crEl(`table`);
  var captn = table.createCaption();
  var thead = table.createTHead();
  var tfoot = table.createTFoot();
  var tbody = crEl(`tbody`);
  table.appendChild(tbody);
  table.border=`2`;

  var cpt_txt = crTx(`zkusebni tabulka vytvorena pomoci DOM`);
  captn.appendChild(cpt_txt);
 
  var thead_row = thead.insertRow(0);
  var th1 = thead_row.insertCell(0);
  var th2 = thead_row.insertCell(1);
  th1.colSpan=`6`;
  th2.colSpan=`4`;
  th1_txt = crTx(`zahlavi 1`);
  th2_txt = crTx(`zahlavi 2`);
  th1.appendChild(th1_txt);
  th2.appendChild(th2_txt);
 
  var tfoot_row = tfoot.insertRow(0);
  var tf1 = tfoot_row.insertCell(0);
  tf1.colSpan=`10`;
  tf1_txt = crTx(`zapati`);
  tf1.appendChild(tf1_txt);
 
  var row = new Array;
      for (i=0; i<5; i++) {
      row[i] = tbody.insertRow(i);
      var cell = new Array;
      var text = new Array;
        for (j=0; j<10; j++) {
        cell[j] = row[i].insertCell(j);
        text[j] = crTx(j);
        cell[j].appendChild(text[j]);
        }
      }
  document.getElementsByTagName(`body`)[0].appendChild(table);
  }

V čem se tato funkce liší od své starší sestřičky? Vidíte, že hned na začátku je vytvořen popisek, záhlaví a zápatí tabulky pomocí do této chvíle neznámých metod createCaption(), createTHead() a createTFoot(). Všechny tyto metody se aplikují na objekt, který reprezentuje element <table> (v našem případě uložený ve stejnojmenné proměnné). Metody nemají žádné parametry a jejich výsledkem je vytvoření elementů, které jsou ihned automaticky začleněny do tabulky - nemusíme se tedy starat o jejich vložení pomocí metody appendChild(). Poté je stejným způsobem, jako v předchozí funkci, vytvořen element <tbody>. Na přímé vytvoření tohoto elementu žádná metoda createTBody() bohužel neexistuje. Musíme proto použít konvenční způsob. Všimněte si, že element <tbody> ihned umístíme do elementu <table>. Je to nutné pro správné chování později použitých metod.

Následuje vytvoření textového uzlu popisku, stejně jako v předchozím příkladu. Poté dojde na vytváření obsahu záhlaví (<thead>). Hned zkraje vidíme novou metodu insertRow(). Tato metoda může být aplikována na objekt reprezentující buď element <table>, nebo elementy <thead>, <tbody> a <tfoot> a postará se o vložení "table row", tj . elementu <tr>. Jako parametr je vkládán index (pořadí řady). Jelikož je právě vkládána první řada, index musí být 0.

Hned poté je pro vytvoření buněk použita metoda insertCell(). Podobnost názvu s metodou předchozí není náhodná. Metoda vytváří buňku tabulky a vkládá ji na příslušné místo v řadě (<tr>). Na objekt reprezentující element <tr> také musí být tato metoda aplikována. Jako parametr je opět předáván index, tedy pořadí buňky v řadě číslované od nuly.

Další část skriptu zajišťuje vložení textu do buněk stejným způsobem, jak v minulém příkladu.

Dále je vytvořen obsah zápatí (<tfoot>) a těla (<tbody>), opět pomocí metod insertRow() a insertCell() a přidán do tabulky.

Na závěr dnešního dílu je pro vás připravena tabulka všech vlastností jednotlivých elementů tabulky tak, jak jsou definovány dle normy W3C DOM Level 1 HTML. Tyto vlastnosti jsou využitelné pro čtení i pro nastavení hodnoty vlastnosti. Vlastnosti odpovídají atributům příslušných elementů tabulky tak, jak jsou definovány v normě HTML 4.0, kde můžete také získat informace a hodnotách, které mohou tyto vlastnosti nabývat. Obecná syntaxe při využívání těchto vlastností v DOM vypadá takto:

syntaxe pro čtení:

var hodnota_vlastnosti = element_tabulky.vlastnost;

syntaxe pro nastavení:

element_tabulky.vlastnost=`hodnota`;

nebo pomocí univeverzální metody setAttribute():

element_tabulky.setAttribute(`vlastnost`, `hodnota`);

Upozornění: všechny názvy vlastností jsou samozřejmě "case-sensitive", takže se přesně držte velkých a malých písmen v jejich názvech!

Vlastnosti elementů tabulky pro nastavení i čtení

vlastnost element tabulky
<table> <caption> <col>
<colgroup>
<thead>
<tfoot>
<tbody>
<tr> <td>
<th>
abbr NE NE NE NE NE ANO
align ANO ANO ANO ANO ANO ANO
axis NE NE NE NE NE ANO
bgColor ANO NE NE NE ANO ANO
border ANO NE NE NE NE NE
cellPadding ANO NE NE NE NE NE
cellSpacing ANO NE NE NE NE NE
ch NE NE ANO ANO ANO ANO
chOff NE NE ANO ANO ANO ANO
colSpan NE NE NE NE NE ANO
frame ANO NE NE NE NE NE
headers NE NE NE NE NE ANO
height NE NE NE NE NE ANO
noWrap NE NE NE NE NE ANO
span NE NE ANO NE NE NE
rowSpan NE NE NE NE NE ANO
rules ANO NE NE NE NE NE
scope NE NE NE NE NE ANO
summary ANO NE NE NE NE NE
vAlign NE NE ANO ANO ANO ANO
width ANO NE ANO NE NE ANO

V příštím dílu dokončíme problematiku tabulek a ukážeme si metody pro mazání elementů v tabulce a představíme si metody a vlastnosti určené pro přístup k jednotlivým elementům (objektům) v rámci HTML tabulky. Opět si všechny metody a vlastnosti pro přístup a manipulaci s objekty odpovídajícími elementům tabulky shrneme do přehledné tabulky.

Diskuze (1) Další článek: Canon PowerShot S-30 - dvojče k pohledání

Témata článku: Software, Programování, Objekt, Dok, Konvenční způsob, Důležitý sloupec, Vytváření, Dóm, Model, Stejný prvek, Stejné tělo, Objektový, Model S, Buňka, Cell, Jednotlivá buňka, Stejná metoda, Element, Axis, Dokument, Tab, Orange, Mode, Syntax, Jednoduché tělo


Určitě si přečtěte

Avast Omni: Krabička, která vám hackne síť a promění se v unikátní antivirus

Avast Omni: Krabička, která vám hackne síť a promění se v unikátní antivirus

** Počítač dnes ochrání kdejaký antivirus ** Drobná krabička Omni se postará rovnou o celou domácí síť ** Bude ji odposlouchávat, analyzovat a blokovat útoky

Jakub Čížek | 120

Jakub Čížek
AntivirusIoT
Google vymyslel technologii superpřesného GPS. Už ji podporuje Pixel 5 a dorazí i na ostatní telefony

Google vymyslel technologii superpřesného GPS. Už ji podporuje Pixel 5 a dorazí i na ostatní telefony

** Kvalita GPS ve městech občas stojí za starou bačkoru ** Mohou za to odrazy signálu od okolních budov ** Google má jejich 3D model, a tak spolupracuje s výrobci GPS čipů

Jakub Čížek | 44

Jakub Čížek
NavigaceTechnologieGoogle
Lidl buduje chytrou domácnost, propojí všechno se vším
Lukáš Václavík
LidlChytrá domácnostIoT
Elon Musk už není nejbohatší na světě. Během jediného dne přišel o 324 miliard korun
Karel Kilián
Jeff BezosTesla MotorsElon Musk