Můžeme mít dokonalé návyky, ale stejně se občas necháme nachytat. Zrovna nedávno jsem se nechal zase napálit a rval si vlasy na hlavě (a že jich mám), když jsem narazil na "vychytávky" IE při tvorbě tabulek pomocí JavaScriptu.

...

Vezměme to popořadě. HTML lze skládat buďto DOMu, což je opruz, nebo pomocí innerHTML, které sice neni standardizováno, ale všichni ho vzali na milost a dobře udělali. Začněme tedy jím. InnerHTML vzniklo v dílnách Microsoftu jako jednoduchá možnost v přístupu k HTML daného prvku:


alert(document.getElementsByTagName('body')[0].innerHTML);


Příklad vyalertí textový zápis html uvnitř značky body. Stejně tak lze i vnitřní HTML měnit:


document.getElementsByTagName('body')[0].innerHTML = "<h1>Prázdná stránka</h1>";


Nebyl by to Microsoft, aby si to nezesložitil, tuto konstrukci nelze použít na elementy table, tfoot, thead a tr. Zajímavé! Naštěstí mi to došlo hned jak jsem jsem viděl chybovou hlášku: Neznámá chyba při běhu programu. Na výše odkazované stránce je možné se dovědět že tvorba tabulky přes innerHTML opravdu nejde a jak to lze obejít (How to Build Tables Dynamically).

Zde se dočteme, že můžeme využít DOMových metod jako insertCell, insertRow, atd. Tedy pak můžeme psát kód, který je opět kompatibilní ve všech prohlížečích:


var table = document.getElementById('mojeTabulka');
var tr = table.insertRow(-1);
var td1 = tr.insertCell(-1);
td1.innerHTML = '<strong>První buňka</strong>';
var td2 = tr.insertCell(-1);
td2.innerHTML = 'Druhá buňka';


Metody insertRow a insertCell jsou docela mocné, protože argumentem určujeme na jaké pozici se daná buňka/řádek vloží. -1 znamená konec.

Bohužel tento postup nefunguje ve všech případech! Nebyl by to Microsoft, aby to nemělo háček. Představte si, že máte tabulku do které vkládáte řádky, ale tyto řádky si chcete předem připravit a pak je připnout do tabulky naráz. Řádek tím pádem nemůžete vytvořit přes insertRow metodu, ale klasicky před createElement:


var table = document.getElementById('mojeTabulka');
var tr = document.createElement('tr');
var td1 = tr.insertCell(-1);
td1.innerHTML = '<strong>První buňka</strong>';
var td2 = tr.insertCell(-1);
td2.innerHTML = 'Druhá buňka';

table.appendChild(tr);


V tomto případě se IE tváří v pohodě, žádná nespecifikovaná chyba. Jen vám, bude na 4. řádku vytrvale tvrdit, že: td1 má hodnotu null nebo není objekt. Co to ksakru je? Kód všude jinde funguje, konstrukce jsou správné, tak v čem je problém? Problém je v tom, že Explorer neumí použít insert metody a ostatní týkající se tabulek na elementy, které nejsou ve stromu a ustavičně vrací null.

Takže je nutné se pokorně vrátit k DOM createElement, appendChild a insertBefore metodám a vytvářet tabulky takto otrocky. Nicméně i to má jedno mikroskopické úskalíčko Pokud chceme aby řádky v tabulce byly v IE vidět, musíme je vkládat do elementů thead nebo tbody. Pokud je vložíme přímo do elementu table, sice v DOMu budou, ale k zobrazení nedojde.

Pokud vytvoříte tabulku bez tbody nebo thead, a podíváte se na ní IE Developer Toolbarem, tak bude obsahovat tbody! A dokonce můžete do něj elementy řádků připínat a oni budou vidět. Nicméně pak váš kód nebude fungovat v jiných prohlížečích, kteřé si tbody element nedomýšlí.

Jestliže stojíte před úkolem dynamicky tvořit tabulky JavaScriptem, pak vězte, že nejjednodušší cesta, která nesklame je, mít v každé tabulce nadefinované thead a tbody a operace s řádky a buňkami zásadně dělat pomocí DOM metod createElement, appendChild a insertBefore.