NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 20 - Editor tabulek v JavaScriptu

Předchozí
Další

V minulé lekci, Tvorba elementů a hierarchie DOM v JavaScriptu, jsme se naučili vytvořit nový element a vložit jej do HTML stránky.

V dnešním tutoriálu základů JavaScriptu začneme pracovat na komplexnější webové aplikaci. Postupně vytvoříme editor tabulek a zopakujeme si při tom, jak zpracovávat události nebo jak tvořit a upravovat elementy DOM. Kód naší aplikace budeme členit do funkcí, kterým jsme se věnovali v lekci Funkce v JavaScriptu.

Editor tabulek v JavaScriptu

Tabulky jsou klíčovým prvkem mnoha webových stránek, poskytují totiž užitečnou strukturu pro prezentaci dat. V tomto tutoriálu využijeme naše dosavadní znalosti HTML, CSS a samozřejmě JavaScriptu, abychom si vytvořili funkční a interaktivní editor tabulek.

Náš editor tabulek bude mít ve výchozím nastavení tři řádky a pět sloupců. Nad tabulkou budou umístěna tlačítka umožňující měnit její velikost. Aby byla tlačítka funkční, je nutné kliknout na nějakou z buněk tabulky. Poté bude možné kliknutím na některé z tlačítek přidat řádek či sloupec do tabulky. Uživatel si zvolí, zda se změny projeví nad aktivní buňkou nebo pod ní. Podobným způsobem bude moci řádek a sloupec s aktivní buňkou smazat.

Konečný výstup bude vypadat takto:

Editor tabulek
localhost

Příprava HTML dokumentu

V projektu budeme mít tři samostatné soubory reprezentující HTML stránku, CSS styly a samotný kód v JavaScriptu. Začneme tím, že si vytvoříme HTML soubor index.html a do něj doplníme jednoduchý kód:

<!DOCTYPE html>
<html lang="cs-CZ">
<head>
    <title>Editor tabulek</title>
    <meta charset="utf-8" />
    <script src="editor-tabulek.js"></script>
    <link href="editor-tabulek.css" rel="stylesheet" />
</head>
<body>

</body>
</html>

Všimněme si, že jsme v HTML dokumentu vyplnili pouze jeho hlavičku. Obsah <body> necháme prázdný, protože si vše potřebné připravíme ve skriptu. Je to pro nás dokonce výhodné, nasadíme-li aplikaci na jiné stránce, nemusíme již vůbec zasahovat do HTML.

Příprava CSS stylů

Nyní si připravíme soubor s kódem pro stylování tabulky.

V následující ukázce použijeme procento %. Na české klávesnici ho píšeme pomocí Shift a následující klávesy:

Procento na české klávesnici - Základní konstrukce jazyka JavaScript

V hlavičce HTML odkazujeme na soubor s kódem pro stylování tabulky, který má název editor-tabulek.css. Vidíme, že je umístěn ve stejné složce. Do nového souboru vložíme kód:

table {
    border-spacing: 0;
    border: 1px solid black;
    width: 500px;
}
table, table td {
    padding: 0;
    margin: 0;
}
table td {
    border: 1px solid black;
}
table td input {
    padding: 0;
    margin: 0;
    width: 100%;
    border: 0px solid transparent;
    height: 100%;
}

Tvorbu CSS nebudeme blíže komentovat, jelikož by již měla být známa z kurzů Základy CSS3 nebo Moderní webdesign.

Práce v JavaScriptu

Jako poslední vytvoříme soubor editor-tabulek.js, který postupně doplníme naším skriptem.

Deklarace proměnných

Nejprve v něm deklarujeme čtyři proměnné:

let tabulka;
let sloupcu = 5;
let radku = 3;
let aktivniBunka;

Proměnná tabulka bude obsahovat samotnou tabulku. Do proměnných sloupcu a radku budeme ukládat aktuální počet sloupců a řádků tabulky. Těmto proměnným jsme zároveň nastavili výchozí hodnotu. Tabulka tedy bude po spuštění aplikace obsahovat pět sloupců a tři řádky. Poslední proměnná, aktivniBunka, bude obsahovat odkaz na buňku, kterou uživatel na stránce vybral.

Vytvoření tabulky a buněk

Dále si připravíme dvě funkce pro tvorbu tabulky. První funkce zajistí vytvoření tabulky a její umístění do HTML dokumentu. Na jejím konci zavoláme druhou funkci, která bude sloužit k vytváření jednotlivých buněk tabulky.

Kód pro generování tlačítek a nastavení jejich obsluhy doplníme později.

Funkce vytvorVychoziTabulku()

Tato funkce má za úkol vytvořit základní strukturu tabulky a vložit ji do HTML dokumentu. Tabulka je sestavena na základě výchozího počtu řádků a sloupců, které jsou definovány v proměnných radku a sloupcu. Do skriptu přidáme následující kód:

function vytvorVychoziTabulku() {
    tabulka = document.createElement("table");
    document.body.appendChild(tabulka);

    // ...

}

Tabulka je tvořena elementem <table>, ve kterém jsou vloženy elementy <tr> pro řádky a <td> pro buňky. Nový element tabulky jsme vložili do proměnné tabulka prostřednictvím metody createElement(). Následně jsme tento element připojili k dokumentu do části <body> metodou appendChild().

Nyní přistoupíme k vytváření řádků a buněk tabulky:

function vytvorVychoziTabulku() {
    tabulka = document.createElement("table");
    document.body.appendChild(tabulka);

    for (let y = 0; y < radku; y++) {
        let tr = document.createElement("tr");
        tabulka.appendChild(tr);

        for (let x = 0; x < sloupcu; x++) {
            tr.appendChild(vytvorBunku());
        }
    }
}

Pomocí vnějšího cyklu (y) při každé iteraci vytváříme nový řádek a ve vnořeném cyklu (x) do něj vždy přidáváme nové buňky. Na posledním řádku uvedeného kódu voláme funkci vytvorBunku(), která se postará o vytvoření a konfiguraci jednotlivých buněk tabulky. Tvorba buňky tabulky bude obsahovat více kroků, proto pro ni vytvoříme samostatnou funkci.

Funkce vytvorBunku()

Nyní vytvoříme funkci pro vytvoření jednotlivých buněk:

function vytvorBunku() {
    let td = document.createElement("td");
    let tdInput = document.createElement("input");
    tdInput.type = "text";
    tdInput.onfocus = function() {
        aktivniBunka = this;
    };
    td.appendChild(tdInput);
    return td;
}

Buňku tabulky ve webových dokumentech reprezentuje element <td>. Ve funkci vytvorBunku() tedy nejprve vytváříme tento element pomocí metody createElement() a ukládáme jej do proměnné td. Dále vytváříme proměnnou tdInput obsahující element <input>, tedy vstupní pole. Pomocí atributu type s hodnotou "text" u tohoto pole určujeme, že bude sloužit k zadávání textu.

Posléze nastavujeme tomuto textovému poli událost onfocus, která nastane, když na něj uživatel klikne nebo do něj vstoupí pomocí klávesnice, například tabulátorem. Tato událost nám pomůže určit, která buňka je v daném okamžiku aktivní, což bude důležité pro další interakce s tabulkou.

Jakmile je buňka aktivní, ukládáme si odkaz na ni do proměnné aktivniBunka pomocí klíčového slova this. Díky tomu budeme moci s aktivní buňkou snadno pracovat v dalších částech kódu. Nakonec připravený <input> vkládáme do buňky uložené v proměnné td, kterou pak vracíme jako výsledek funkce pomocí return.

Klíčové this v uvedeném kódu odkazuje na objekt, který vyvolal danou událost onfocus. V našem případě bude this odkazovat na konkrétní textové pole (tdInput), které bylo vybráno kliknutím myši nebo pomocí tabulátoru. Díky tomu můžeme napsat obecný kód, který bude použitelný pro více elementů a nemusíme tedy explicitně odkazovat na každý jednotlivý element.

Vložení tabulky do dokumentu

Nyní můžeme zavolat funkci vytvorVychoziTabulku() a vytvořit tabulku v dokumentu:

window.onload = function () {
    vytvorVychoziTabulku();
}

Funkci spouštíme při načtení stránky pomocí události onload na objektu window. Takto jsme zajistili, že tabulka bude vytvořena a připravena k použití ihned po načtení stránky:

Editor tabulek
localhost

V konzoli vývojářských nástrojů v prohlížeči najdeme strukturu vytvořené tabulky pod záložkou Prvky (v anglických verzích Elements). Tato záložka umožňuje detailně prozkoumat HTML strukturu tabulky a ověřit, že byla správně vytvořena:

Zobrazení struktury vytvořené tabulky v konzoli - Základní konstrukce jazyka JavaScript

Tvorba tlačítek

Tabulku máme připravenou a můžeme se zaměřit na doplnění tlačítek, která uživateli umožní tabulku upravovat. Protože jich bude více, vytvoříme si pro přidání tlačítka další funkci s názvem vytvorTlacitko():

function vytvorTlacitko(popisek) {
    let btn = document.createElement("button");
    btn.textContent = popisek;
    document.body.appendChild(btn);
    return btn;
}

V parametru zadáváme text, který bude použit jako popisek tlačítka. Funkce při zavolání vytvoří tlačítko, nastaví mu zadaný popisek, vloží jej do elementu <body> a následně jej vrátí.

Tlačítko vracíme kvůli tomu, abychom mu mohli později nastavit obsluhu události.

Nyní vytvoříme samotná tlačítka. Uděláme to ve funkci vytvorOvladaciTlacitka(), kde budeme volat naši pomocnou funkci:

function vytvorOvladaciTlacitka() {
    vytvorTlacitko("Přidat řádek dolů");
    vytvorTlacitko("Přidat řádek nahoru");
    vytvorTlacitko("Přidat sloupec vlevo");
    vytvorTlacitko("Přidat sloupec vpravo");
    vytvorTlacitko("Odstranit řádek");
    vytvorTlacitko("Odstranit sloupec");
}

Vrácená tlačítka si neukládáme, později jim zde přiřadíme obsluhu události.

Princip DRY (Don’t Repeat Yourself) nám říká, že bychom měli minimalizovat duplicitní kód. Volání funkce vytvorTlacitko() by tedy šlo vložit do cyklu, který by načítal popisky tlačítek uložené v poli. V tomto případě však ponecháváme tlačítka vytvořená samostatně, kvůli pozdějšímu doplnění obsluhy událostí.

Funkci zavoláme v obsluze události window.onload ještě před samotným vytvořením tabulky:

window.onload = function () {
    vytvorOvladaciTlacitka();
    vytvorVychoziTabulku();
}

Výsledek:

Editor tabulek
localhost

Funkce pro tvorbu řádku

Na závěr si dnes napíšeme funkci, která bude sloužit k vytvoření nového řádku. Ve funkci vytvoříme nový element <tr> a vložíme do něj stejný počet buněk, jaký mají stávající řádky. Aktuální počet buněk vezmeme z prvního řádku tabulky a postup jeho získání si pro názornost nejprve rozepíšeme do třech kroků:

let prvniRadek = tabulka.firstElementChild;
let bunkyPrvnihoRadku = prvniRadek.querySelectorAll("td");
let pocetBunekVPrvnimRadku = bunkyPrvnihoRadku.length;

Nejprve získáváme první řádek tabulky, element <tr>, a ukládáme ho do proměnné prvniRadek. Z této proměnné vybíráme všechny elementy <td> a ukládáme je do kolekce NodeList s názvem bunkyPrvnihoRadku. Nakonec zjišťujeme pomocí vlastnosti length celkový počet vybraných buněk – tedy buněk v prvním řádku.

V naší funkci sloučíme tento kód do jednoho příkazu a doplníme ho o logiku pro vytvoření nového řádku:

function vytvorRadek() {
    let novyRadek = document.createElement("tr");
    let pocetBunekVPrvnimRadku = tabulka.firstElementChild.querySelectorAll("td").length;

    for (let i = 0; i < pocetBunekVPrvnimRadku; i++) {
        novyRadek.appendChild(vytvorBunku());
    }
    return novyRadek;
}

Do proměnné novyRadek vytváříme element <tr>, který představuje nový řádek tabulky. Počet buněk v prvním řádku získáváme přímo v jednom kroku, kdy z prvního řádku tabulky vybíráme všechny elementy <td> a jejich počet ukládáme do proměnné pocetBunekVPrvnimRadku. Následně pomocí cyklu vytváříme nový řádek se stejným počtem buněk, přičemž každou buňku přidáváme pomocí funkce vytvorBunku(). Nakonec vracíme vytvořený řádek.

Funkci pro přidání řádku máme tímto připravenou, později ji budeme v aplikaci volat pro přidání řádku před aktivní buňku nebo za ní.

V další lekci, Dokončení editoru tabulek v JavaScriptu, se naučíme do editoru tabulek vkládat nové sloupce a řádky. Doplníme do něj také funkce pro jejich smazání.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 2120x (2.79 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Tvorba elementů a hierarchie DOM v JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Přeskočit článek
(nedoporučujeme)
Dokončení editoru tabulek v JavaScriptu
Článek pro vás napsal Michal Žůrek - misaz
Avatar
Uživatelské hodnocení:
1185 hlasů
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.
Aktivity