Lekce 18 - 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:
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:
V konzoli najdeme strukturu vytvořené tabulky na záložce Prvky:
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:
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 1953x (1.63 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript