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, Programování, Opera, Yellow, Buňka, Speciální metoda, Objekt, HTML, Mode, Dokument, Model S, Index, Objektový, Code, Jednotlivé prvky, Určitý objekt, Doma, Jednotlivá buňka, Element, Model, Jednotlivý díl, Dok


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

Superinteligenci nedokážeme ovládat a nejspíše se nedozvíme, že už tam někde je

Superinteligenci nedokážeme ovládat a nejspíše se nedozvíme, že už tam někde je

** Firmy i organizace včetně EU připravují etické kodexy pro A.I. ** Vědci z Madridu zkoumali, jestli je budeme moci aplikovat na A.I. 2.0 ** A je tu háček, superinteligence pro nás totiž bude neuchopitelná

Jakub Čížek | 84

Jakub Čížek
Umělá inteligence
Týden Živě: On fakt dnes ještě někdo stahuje filmy z Ulož.to?

Týden Živě: On fakt dnes ještě někdo stahuje filmy z Ulož.to?

** Kauza Ulož.to a proč my dva už (moc) newarezíme ** Windows 10X existují, ale nabízí se otázka proč ** Nissan ukázal vizi kanceláře v podobě karavanu

Jakub Čížek, Vladislav Kluska | 152

Jakub ČížekVladislav Kluska
Týden ŽivěVideo
Fedora 33 prostě funguje. Linux si zaslouží dobýt laptop, je to ale asi opět marné

Fedora 33 prostě funguje. Linux si zaslouží dobýt laptop, je to ale asi opět marné

** Desktopový Linux funguje a vypadá stále lépe ** Fedora 33 není výjimkou ** Ve stínu Windows a macOS tu vyrostly skvělé alternativy

Jakub Čížek | 168

Jakub Čížek
FedoraOperační systémyLinux
Dostali jste nový počítač? Tohle s ním udělejte, než ho začnete používat

Dostali jste nový počítač? Tohle s ním udělejte, než ho začnete používat

** Každý nový počítač si zaslouží počáteční péči ** Odinstalujte bloatware a nezapomeňte na vhodné nastavení ** Poradíme, jak se o počítač s Windows 10 postarat

David Polesný, Stanislav Janů | 75

David PolesnýStanislav Janů
PočítačeNotebooky
Vybíráme nejlepší monitory: Od úplně levných až po displeje na rozmazlování očí

Vybíráme nejlepší monitory: Od úplně levných až po displeje na rozmazlování očí

** Vybrali jsme nejlepší monitory na práci i pořádné hraní ** Nejlevnější monitor s kvalitním panelem nestojí ani tři tisíce ** Rozlišení 4K a větší obrazovka už není nedostupný luxus

David Polesný | 31

David Polesný
Monitory
Můžete mít dvakrát rychlejší VDSL? Mapa Cetinu ukazuje, kde je dostupný bonding
Lukáš Václavík
CETINPřipojení k internetu
Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

** Vývoj COVID-19 v Česku: nakažení, úmrtí, testovaní, hospitalizovaní ** Mapa podle okresů, přehled podle věku, situace v Evropě i ve světě ** Každý den aktualizované grafy a mapy

Marek Lutonský | 172

Marek Lutonský
COVID-19Koronavirus