Objektový model dokumentu 8.

V dnešním díle si ukážeme vlastnosti pro přístup k jednotlivým prvkům tabulky a metody pro odstranění prvků tabulky. Na konci najdete přehlednou tabulku vlastností a metod pro práci s HTML tabulkami.

Minule jsme se seznámili s některými speciálními metodami pro vytváření jednotlivých částí tabulky. Pro potřeby manipulace s tabulkou je v DOM Level 1 HTML k dispozici i několik vlastností pro snadný přístup k těmto částem.

"Objektový model" tabulky

K lepšímu osvojení vlastností pro přístup k jednotlivým prvkům tabulky jistě přispěje, pokud si objasníme hierarchický model struktury jednotlivých objektů v tabulce. Nejedná se o nic složitého, jelikož tato objektová struktura samozřejmě odpovídá struktuře elementů v tabulce.

Na vrcholu stojí objekt typu HTMLTableElement, který reprezentuje celou tabulku (tj. odpovídá elementu <table>).

Každá tabulka může mít popisek (tag <caption>) - přístup k objektu popisku získáme pomocí vlastnosti caption. Jedná se o vlastnost objektu typu HTMLTableElement. Syntaxe:

var popisek = treti_tabulka.caption;

Pozn.: Předpokládejme, že v proměnné treti_tabulka bychom měli uložen objekt typu HTMLTableElement reprezentující určitou tabulku.

Dětmi objektu typu HTMLTableElement jsou objekty typu HTMLTableSectionElement. Tyto objekty reprezentují sekci tabulky, tedy elementy <thead>, <tfoot> a <tbody>. Přímý přístup k nim zajišťují vlastnosti tHead, tFoot a tBodies[]. Tyto vlastnosti můžeme použít u objektu typu HTMLTableElement (tj. u objektu tabulky).

var zahlavi_tabulky = treti_tabulka.tHead;
var zapati_tabulky = treti_tabulka.tFoot;
var kolekce_tel_tabulky = treti_tabulka.tBodies;
var treti_telo_tabulky = kolekce_tel_tabulky[2]; // tBodies vrací kolekci (pole)

Jak už název vlastnosti tBodies[] napovídá, tato vlastnost vrací kolekci (pole) objektů indexovaných od nuly. Je to z toho důvodu, že každá tabulka může obsahovat více elementů <tbody>. Ostatní dvě vlastnosti vrací jednotlivý objekt, jelikož v tabulce mohou být zastoupeny každý jen jednou.

Pozor ovšem na nestandardní chování vlastnosti tBodies[] v Internet Exploreru za určitých okolností. Pokud je tabulka vytvářena pomocí DOM, je nutné element(y) <tbody> umístit do objektu tabulky jako první, ještě před vytvořením záhlaví a zápatí za použití metod createTHead() a createTFoot(). Pokud toto pravidlo nebude dodrženo, v kolekci tBodies[] přibude jeden prázdný prvek (neobsahující žádné řady) na první místo (s indexem 0) - skutečné v pořadí první tělo tabulky bude zařazeno až na druhém místě (tBodies[1]). Výskyt tohoto "parazitního pseudoobjektu" pak nabourává normální chod skriptů, ve kterých se počítá s tím, že těla tabulky jsou řazeny od nuly.

Každá sekce tabulky (<thead>, <tfoot> a <tbody>) obsahuje jednu a více řad (<tr>). V souladu s normou to můžeme vyjádřit i jinak - dětmi objektu HTMLTableSectionElement je jeden nebo více objektů typu HTMLTableRowElement. Přístup k řadám tabulky získáme pomocí vlastnosti rows[]. Tato vlastnost vrací pole všech řad tabulky. Při aplikaci na objekt typu HTMLTableSectionElement to vypadá takto:

var kolekce_rad_tretiho_tela = treti_telo_tabulky.rows;
var kolekce_rad_zahlavi = zahlavi_tabulky.rows;

Objekty typu HTMLTableSectionElement (<thead>, <tfoot> a <tbody>) však nejsou povinnou součástí tabulky - tabulka může obsahovat rovnou řady (ačkoliv jsme si v minulém dílu uváděli, že při DOM manipulaci s tabulkou je vhodné, aby tabulka obsahovala alespoň element <tbody>). Proto můžeme vlastnost rows[] použít rovnou i u objektu tabulky.

var kolekce_rad_tabulky = treti_tabulka.rows;

U objektů řady tabulky (tj. typu HTMLTableRowElement) můžeme využít dvou vlastností, které nám umožní identifikovat jejich pozici v tabulce. Jsou to vlastnosti rowIndex a sectionRowIndex. Výsledkem obou je číslo, které identifikuje pořadí (index) dané řady v nadřazeném elementu, číslované od nuly. Rozdíl mezi nimi spočívá v tom, že vlastnost rowIndex vrací pozici řady v kolekci všech řad v celé tabulce - naopak vlastnost sectionRowIndex vrací pozici řady pouze v dané sekci tabulky.

var rada = kolekce_rad_tretiho_tela[4];
var poradi_rady_v_tabulce = rada.rowIndex;
var poradi_rady_v_sekci = rada.sectionRowIndex;

Řada tabulky obsahuje buňky tabulky <td> (jinak řečeno, dětmi objektu typu HTMLTableRowElement jsou objekty typu HTMLTableCellElement). Jistě není překvapením, že ke kolekci objektů buněk tabulky lze přistupovat pomocí vlastnosti cells[].

var sesta_bunka = rada.cells[5];

Stejně jako u řad tabulek, pro zjištění pozice buňky v řadě existuje příslušná vlastnost s analogickým názvem cellIndex.

var index = sesta_bunka.cellIndex; // výsledkem bude v našem případě samozřejmě číslo 5...

Tato objektová struktura nám umožňuje rychlý přístup k prvků tabulky. Například, pokud budeme chtít získat objekt první buňky v páté řadě třetího těla tabulky, stačí tato syntaxe:

var bunka = treti_tabulka.tBodies[2].rows[4].cells[0];

Odstranění prvků tabulky

Norma DOM Level 1 HTML definuje i několik metod, pomocí kterých můžeme mazat jednotlivé části tabulky. Soubor těchto metod je zcela "souměrný" s kolekcí metod pro vytváření prvků tabulky (představené v minulém dílu), tj. každé "kreativní" metodě odpovídá metoda "destruktivní".

Metoda deleteCaption() Tato metoda zajišťuje odstranění popisku tabulky (<caption>). Metoda objektu typu HTMLTableElement. Nemá žádné parametry.

treti_tabulka.deleteCaption();

Metoda deleteTHead() Metoda zajišťuje smazání záhlaví (<thead>). Metoda objektu typu HTMLTableElement. Nemá žádné parametry.

treti_tabulka.deleteTHead();

Metoda deleteTFoot() Zcela v souladu s jejím názvem se po aplikaci této metody dočkáme smazání zápatí (element <tfoot>. Metoda objektu typu HTMLTableElement. Nemá žádné parametry.

treti_tabulka.deleteTFoot();

Metoda deleteRow() Zajistí smazání řady tabulky (element <tr>). Jako parametr se předává index řady, která má být odstraněna. Pokud je metoda aplikována na objekt typu HTMLTableElement (tj. přímo na tabulku), jedná se o pořadí v kolekci všech řad v tabulce. Pokud je metoda použita u objektu typu HTMLTableSectionElement (<thead>, <tfoot> a <tbody>), označuje index pořadí řady v dané sekci tabulky.

treti_tabulka.tFoot.deleteRow(3); // smaže 4. řadu v zápatí tabulky

Metoda deleteCell() Tato metoda smaže buňku tabulky. Jako parametr se předává index buňky, která má být odstraněna. Metodu lze aplikovat na objekt typu HTMLTableRowElement.

treti_tabulka.tHead.rows[3].deleteCell(2); // smaže 3.buňku ve 4. řadě v záhlaví tabulky

Všechny "demoliční" operace s tabulkou si ukažme na příkladu. Použijme jako základ tabulku vytvořenou pomocí DOM v minulém dílu. Funkci pro vytváření tabulky si mírně upravíme, aby pro větší názornost byly řady v těle tabulky obarveny různými barvami. To provedeme jednoduchým způsobem - vytvoříme si pole barev, které budeme chtít použít, a při vytváření řad v cyklu nastavíme pomocí vlastnosti bgColor barvu pozadí každé řady:

var color = new Array;
color[0] = `white`;
color[1] = `yellow`;
color[2] = `lightgreen`;
color[3] = `lightblue`;
color[4] = `orange`;

A cyklus pro vytváření řad upravíme přidáním jednoho řádku (tučně) takto:

var row = new Array;
  for (i=0; i<5; i++) {
  row[i] = tbody.insertRow(i);
  row[i].bgColor = color[i];
...atd.

Tím dosáhneme vytvoření tabulky s již obarvenými řadami.

Do HTML kódu stránky dodáme odkazy na funkce, které zajišťují mazání prvků tabulky.

Ukažme si tyto funkce. Nejprve funkce pro mazání popisku, záhlaví a zápatí:

function deleteCaption() {
  document.getElementsByTagName(`table`)[0].deleteCaption();
}

function deleteTHead() {
  document.getElementsByTagName(`table`)[0].deleteTHead();
}

function deleteTFoot() {
  document.getElementsByTagName(`table`)[0].deleteTFoot();
}

Jak vidíte, všechny tři funkce jsou velmi podobné - na objekt tabulky, který je získán pomocí metody getElementsByTagName(), aplikují metody deleteCaption(), deleteTHead() a deleteTFoot().

Dále funkce pro mazání řady v tabulce:

function deleteRow(poradi, tab) {
  var table = document.getElementsByTagName(`table`)[0];
  var row_parent;
  (tab) ? row_parent = table : row_parent = table.tBodies[0];
  row_parent.deleteRow(poradi);
}

Tato funkce má 2 parametry - proměnnou poradi označující index řady, kterou chceme smazat, a za druhé proměnnou tab, která nabývá hodnoty true, pokud chceme metodu deleteRow() aplikovat na tabulku, nebo false, pokud na tělo tabulky. Podle toho je také do proměnné row_parent uložen buď objekt reprezentující tabulku, nebo objekt reprezentující tělo tabulky a na tento objekt je poté metoda deleteRow() aplikována.

Další funkce pro mazání buňky je velmi podobná:

function deleteCell(poradi, poradi_bunky, tab) {
  var table = document.getElementsByTagName(`table`)[0];
  var row_parent;
  (tab) ? row_parent = table : row_parent = table.tBodies[0];
  row_parent.rows[poradi].deleteCell(poradi_bunky);
}

Jako parametr navíc oproti předchozí funkci je předáváno pořadí (index) buňky v řadě v proměnné poradi_bunky. Metoda deleteCell() je pak aplikována na příslušnou řadu (v celé tabulce nebo v těle tabulky, dle hodnoty proměnné tab).

Na závěr povídání o práci s tabulkami v DOM je pro vás připravena shrnující tabulka všech metod a vlastností týkajících se tabulek. Metody a vlastnosti jsou seřazeny dle typu objektu, na který se aplikují.

Tabulka metod a funkcí pro manipulaci s prvky tabulky

vlastnost nebo metoda: součást DOM: IE 5, 5.5 IE 6 Mozilla/NN6 Konqueror 2.2 Opera 5, 6
Vlastnosti a metody objektu typu HTMLTableElement (element <table>)
caption L1 HTML ANO ANO ANO ANO NE
tHead L1 HTML ANO ANO ANO ANO NE
tFoot L1 HTML ANO ANO ANO ANO NE
tBodies[] L1 HTML ANO ANO ANO ANO NE
createCaption() L1 HTML ANO ANO ANO NE NE
createTHead() L1 HTML ANO ANO ANO NE NE
createTFoot() L1 HTML ANO ANO ANO NE NE
deleteCaption() L1 HTML ANO ANO ANO ANO NE
deleteTHead() L1 HTML ANO ANO ANO ANO NE
deleteTFoot() L1 HTML ANO ANO ANO ANO NE
Vlastnosti a metody objektu typu HTMLTableElement (element <table>)
a objektů typu HTMLTableSectionElement (elementy <thead>, <tfoot> a <tbody>)
rows[] L1 HTML ANO ANO ANO ANO NE
insertRow(index) L1 HTML ANO ANO ANO NE NE
deleteRow(index) L1 HTML ANO ANO ANO ANO NE
Vlastnosti a metody objektu typu HTMLTableRowElement (element <tr>)
rowIndex L1 HTML ANO ANO ANO ANO NE
sectionRowIndex L1 HTML ANO ANO ANO ANO NE
cells[] L1 HTML ANO ANO ANO chybně NE
insertCell(index) L1 HTML ANO ANO ANO NE NE
deleteCell(index) L1 HTML ANO ANO ANO ANO NE
Vlastnosti objektu typu HTMLTableCellElement (elementy <td> a <th>)
cellIndex L1 HTML ANO ANO ANO chybně NE

Příště si začneme povídat o práci se styly a stylesheety prostřednictvím DOM.

Váš názor Další článek: Docházejí zásoby GeForce3

Témata článku: Software, Internet, Opera, Programování, Index, HTML, Objekt, Yellow, Speciální metoda, Code, Objektový, Jednotlivý díl, Dokument, Model, Jednotlivá buňka, Dok, Mode, Model S, Element, Doma, Určitý objekt, Buňka, Jednotlivé prvky


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

Nejlepší notebooky do 10 000 korun: Co koupit a čemu se raději vyhnout

Nejlepší notebooky do 10 000 korun: Co koupit a čemu se raději vyhnout

** Do deseti tisíc korun lze dnes koupit slušné notebooky ** V nabídce ale i tak převládají zastaralé a pomalé modely ** Poradíme, jak dobře vybrat i s omezeným rozpočtem

David Polesný | 100

Wi-Fi 6 konečně začíná dostávat smysl. Poradíme, jak ji využít

Wi-Fi 6 konečně začíná dostávat smysl. Poradíme, jak ji využít

** Na trh míří první levné Wi-Fi 6 routery ** Nabídka zařízení, zejména notebooků, každý den roste ** Poradíme, jak nejlépe přejít s domácností na Wi-Fi 6

Tomáš Holčík | 28


Aktuální číslo časopisu Computer

Megatest 20 procesorů

Srovnání 15 True Wireless sluchátek

Vyplatí se tisknout fotografie doma?

Vybíráme nejlepší základní desky