Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
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 17 - Editor tabulek v JavaScriptu

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. Pokud uživatel vybere v tabulce nějakou z buněk, bude moci kliknutím na dané tlačítko přidat řádek či sloupec do tabulky. V těchto případech 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 hlavičce HTML na něj odkazujeme, má zde název editor-tabulek.css a 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 kurzu Základy CSS3.

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; // výchozí počet sloupců tabulky
let radku = 3; // výchozí počet řádků tabulky
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 jsem zároveň nastavili výchozí velikost. 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í z nich, pojmenovaná vytvorVychoziTabulku(), se zaměří na vytvoření a umístění tabulky do našeho HTML dokumentu. Na jejím konci budeme volat funkci vytvorBunku(), která bude generovat jednotlivé buňky tabulky.

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

Funkce vytvorVychoziTabulku()

Úkolem této funkce je vytvoření základní struktury tabulky a její vložení do HTML dokumentu. Na základě výchozího počtu řádků a sloupců, definovaných v proměnných radku a sloupcu, sestavíme celou tabulku.

Jak víme, tabulka je tvořena elementem <table>, ve kterém jsou vloženy elementy <tr> pro řádky a <td> pro buňky. Nejprve tedy vytvoříme element <table> a vložíme jej do těla HTML dokumentu:

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

Do proměnné tabulka jsme vložili nový element vytvořený pomocí metody createElement(). Protože jej chceme vložit do <body>, zavoláme jako rodiče document.body a na něm metodu appendChild() s odkazem na vytvořený element v jejím parametru.

Nyní přistoupíme k vytváření řádků a buněk tabulky. Pomocí vnějšího cyklu (y) při každé iteraci vytvoříme nový řádek a ve vnořeném cyklu (x) do něj vždy přidáme nové buňky:

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());
        }
    }
}

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()

Buňku tabulky ve webových dokumentech reprezentuje element <td>. Ve funkci vytvorBunku() tedy nejprve vytvoříme tento element. Dále buňce přidáme element <input> a určíme, že bude reprezentovat textové pole, do kterého mohou uživatelé psát. Před vložením elementu <input> do <td> ještě umožníme uživatelům editovat obsah buňky přímo v tabulce. Nastavíme mu událost onfocus, která nastane, když uživatel klikne na textové pole 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ž je důležité pro další interakce s tabulkou. Jakmile je buňka aktivní, uloží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 takto připravený <input> vložíme do buňky a vrátíme ji pomocí return. Celý kód funkce vypadá takto:

function vytvorBunku() {
    let td = document.createElement("td");
    let tdInput = document.createElement("input");
    tdInput.type = "text"; // nastavíme element input jako textové pole
    tdInput.onfocus = function() {
        aktivniBunka = this;  // když je input aktivní, uložíme odkaz na danou buňku
    };
    td.appendChild(tdInput);
    return td;  // vracíme vytvořenou buňku
}

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.

Nyní můžeme zavolat funkci vytvorVychoziTabulku() a vytvořit tabulku v dokumentu. Funkci spustíme při načtení stránky pomocí události onload na objektu window. Takto zajistíme, že tabulka bude vytvořena a připravena k použití ihned po načtení stránky:

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

Tabulka bude vypadat takto:

Editor tabulek
localhost

V konzoli najdeme strukturu vytvořené tabulky na záložce Prvky:

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 vytvorTlacitkoAVlozHo(). V parametru jí budeme zadávat text, který má být tlačítku nastaven jako popisek. Funkce tedy vytvoří tlačítko, nastaví mu popisek, vloží ho do předka a vrátí ho:

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

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() {
    vytvorTlacitkoAVlozHo("Přidat řádek dolů");
    vytvorTlacitkoAVlozHo("Přidat řádek nahoru");
    vytvorTlacitkoAVlozHo("Přidat sloupec vlevo");
    vytvorTlacitkoAVlozHo("Přidat sloupec vpravo");
    vytvorTlacitkoAVlozHo("Odstranit řádek");
    vytvorTlacitkoAVlozHo("Odstranit sloupec");
}

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

Volání funkce vytvorTlacitkoAVlozHo() bychom mohli vložit do cyklu a načítat v něm popisky tlačítek, které bychom měli uložené v poli. Později zde však budeme nastavovat obsluhu událostí pro každé tlačítko, proto zde necháme vytvořit tlačítka samostatně.

Funkci zavoláme v obsluze události window.onload:

window.onload = function () {
    vytvorOvladaciTlacitka(); // Tento řádek jsme přidali
    vytvorVychoziTabulku();
}

Výsledek:

Editor tabulek
localhost

Funkce pro tvorbu řádku

Na závěr si dnes ještě napíšeme funkci, kterou zavoláme, když budeme chtít vytvořit nový řádek. Vytvoříme v ní nový element <tr> a vložíme do něj stejný počet buněk, jako mají již existující řádky. Aktuální počet buněk vezmeme z prvního řádku a získáme jej pro názornost nejprve postupně ve třech krocích:

let prvniRadek = tabulka.firstElementChild; // získá první řádek tabulky, element <tr>
let bunkyPrvnihoRadku = prvniRadek.querySelectorAll('td'); // získá všechny elementy <td> prvního řádku
let pocetBunekVPrvnimRadku = bunkyPrvnihoRadku.length; // vrátí počet získaných elementů<td>

Nejprve jsme vyhledali první řádek tabulky, v něm jsem našli všechny elementy <td> a pomocí vlastnosti length zjistili jejich počet. Nyní uvedené kroky zřetězíme a zapíšeme vše přímo do proměnné pocetBunekVPrvnimRadku. Podobně budeme vlastnosti a metody zřetězovat i v další funkcích:

let pocetBunekVPrvnimRadku = tabulka.firstElementChild.querySelectorAll('td').length;

Proměnnou pocetBunekVPrvnimRadku pak využijeme v cyklu, jímž naplníme nový řádek odpovídajícím počtem nových buněk. Vytvořený řádek nakonec vrátíme. Celý kód funkce vytvorRadek() bude vypadat takto:

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

    for (let i = 0; i < pocetBunekVPrvnimRadku; i++) { // cyklus bude mít stejný počet iterací, jako má první řádek buněk
        novyRadek.appendChild(vytvorBunku()); // novému řádku přidáme pokaždé jednu novou buňku
    }
    return novyRadek;
}

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 1821x (1.63 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í:
754 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