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.