Zarábaj až 6 000 € mesačne! Akreditované rekvalifikačné kurzy od 0 €. Viac informácií.

19. diel - Editor tabuliek v JavaScripte

Predchádzajúci
Ďalší

V minulej lekcii, Tvorba elementov a hierarchie DOM v JavaScripte, sme sa naučili vytvoriť nový element a vložiť ho do HTML stránky.

V dnešnom tutoriále základov JavaScriptu začneme pracovať na komplexnejšej webovej aplikácii. Postupne vytvoríme editor tabuliek a zopakujeme si pri tom, ako spracovávať udalosti alebo ako tvoriť a upravovať elementy DOM. Kód našej aplikácie budeme členiť do funkcií, ktorým sme sa venovali v lekcii Funkcie v JavaScripte.

Editor tabuliek v JavaScripte

Tabuľky sú kľúčovým prvkom mnohých webových stránok, poskytujú totiž užitočnú štruktúru na prezentáciu dát. V tomto tutoriále využijeme naše doterajšie znalosti HTML, CSS a samozrejme JavaScriptu, aby sme si vytvorili funkčný a interaktívny editor tabuliek.

Náš editor tabuliek bude mať v predvolenom nastavení tri riadky a päť stĺpcov. Nad tabuľkou budú umiestnené tlačidlá umožňujúce meniť jej veľkosť. Pokiaľ užívateľ vyberie v tabuľke nejakú z buniek, bude môcť kliknutím na dané tlačidlo pridať riadok či stĺpec do tabuľky. V týchto prípadoch zvolí, či sa zmeny prejavia nad aktívnou bunkou alebo pod ňou. Podobným spôsobom bude môcť riadok a stĺpec s aktívnou bunkou zmazať.

Konečný výstup bude vyzerať takto:

Table editor
localhost

Príprava HTML dokumentu

V projekte budeme mať tri samostatné súbory reprezentujúce HTML stránku, CSS štýly a samotný kód v JavaScripte. Začneme tým, že si vytvoríme HTML súbor index.html a do neho doplníme jednoduchý kód:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Table editor</title>
    <meta charset="utf-8" />
    <script src="table-editor.js"></script>
    <link href="table-editor.css" rel="stylesheet" />
</head>
<body>

</body>
</html>

Všimnime si, že sme v HTML dokumente vyplnili iba jeho hlavičku. Obsah <body> necháme prázdny, pretože si všetko potrebné pripravíme v skripte. Je to pre nás dokonca výhodné, ak nasadíme aplikáciu na inej stránke, nemusíme už vôbec zasahovať do HTML.

Príprava CSS štýlov

Teraz si pripravíme súbor s kódom na štylovanie tabuľky. V hlavičke HTML naň odkazujeme, má tu názov table-editor.css a vidíme, že je umiestnený v rovnakom priečinku. Do nového súboru 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 bližšie komentovať, pretože by už mala byť známa z kurzu Základy CSS3.

Práca v JavaScripte

Ako posledný vytvoríme súbor table-editor.js, ktorý postupne doplníme naším skriptom.

Deklarácia premenných

Najprv v ňom deklarujeme štyri premenné:

let table;
let columns = 5; // the default number of columns
let rows = 3; // the default number of rows
let activeCell;

Premenná table bude obsahovať samotnú tabuľku. Do premenných columns a rows budeme ukladať aktuálny počet stĺpcov a riadkov tabuľky. Týmto premenným som zároveň nastavili predvolenú veľkosť. Tabuľka teda bude po spustení aplikácie obsahovať päť stĺpcov a tri riadky. Posledná premenná, activeCell, bude obsahovať odkaz na bunku, ktorú užívateľ na stránke vybral.

Vytvorenie tabuľky a buniek

Ďalej si pripravíme dve funkcie pre tvorbu tabuľky. Prvá z nich, pomenovaná createDefaultTable(), sa zameria na vytvorenie a umiestnenie tabuľky do nášho HTML dokumentu. Na jej konci budeme volať funkciu createCell(), ktorá bude generovať jednotlivé bunky tabuľky.

Kód pre generovanie tlačidiel a nastavenie ich obsluhy doplníme neskôr.

Funkcia createDefaultTable()

Úlohou tejto funkcie je vytvorenie základnej štruktúry tabuľky a jej vloženie do HTML dokumentu. Na základe východiskového počtu riadkov a stĺpcov, definovaných v premenných rows a columns, zostavíme celú tabuľku.

Ako vieme, tabuľka je tvorená elementom <table>, v ktorom sú vložené elementy <tr> pre riadky a <td> pre bunky. Najprv teda vytvoríme element <table> a vložíme ho do tela HTML dokumentu:

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

Do premennej table sme vložili nový element vytvorený pomocou metódy createElement(). Pretože ho chceme vložiť do <body>, zavoláme ako rodičia document.body a na ňom metódu appendChild() s odkazom na vytvorený element v jej parametri.

Teraz pristúpime k vytváraniu riadkov a buniek tabuľky. Pomocou vonkajšieho cyklu (y) pri každej iterácii vytvoríme nový riadok a vo vnorenom cykle (x) do neho vždy pridáme nové bunky:

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

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

        for (let x = 0; x < columns; x++) {
            tr.appendChild(createCell());
        }
    }
}

Na poslednom riadku uvedeného kódu voláme funkciu createCell(), ktorá sa postará o vytvorenie a konfiguráciu jednotlivých buniek tabuľky. Tvorba bunky tabuľky bude obsahovať viac krokov, preto pre ňu vytvoríme samostatnú funkciu.

Funkcia createCell()

Bunku tabuľky vo webových dokumentoch reprezentuje element <td>. Vo funkcii createCell() teda najskôr vytvoríme tento element. Ďalej bunke pridáme element <input> a určíme, že bude reprezentovať textové pole, do ktorého môžu používatelia písať. Pred vložením elementu <input> do <td> ešte umožníme používateľom editovať obsah bunky priamo v tabuľke. Nastavíme mu udalosť onfocus, ktorá nastane, keď používateľ klikne na textové pole alebo do neho vstúpi pomocou klávesnice napríklad tabulátorom.

Táto udalosť nám pomôže určiť, ktorá bunka je v danom okamihu aktívna, čo je dôležité pre ďalšie interakcie s tabuľkou. Akonáhle je bunka aktívna, uložíme si odkaz na ňu do premennej activeCell pomocou kľúčového slova this. Vďaka tomu budeme môcť s aktívnou bunkou ľahko pracovať v ďalších častiach kódu.

Nakoniec takto pripravený <input> vložíme do bunky a vrátime ju pomocou return. Celý kód funkcie vyzerá takto:

function createCell() {
    let td = document.createElement("td");
    let tdInput = document.createElement("input");
    tdInput.type = "text"; // we set the input element as a text field
    tdInput.onfocus = function() {
        activeCell = this;  // when the input is active, we save the reference to that cell
    };
    td.appendChild(tdInput);
    return td;  // we return the created cell
}

Kľúčové this v uvedenom kóde odkazuje na objekt, ktorý vyvolal danú udalosť onfocus. V našom prípade bude this odkazovať na konkrétne textové pole (tdInput), ktoré bolo vybrané kliknutím myši alebo pomocou tabulátora. Vďaka tomu môžeme napísať všeobecný kód, ktorý bude použiteľný pre viacero elementov a nemusíme teda explicitne odkazovať na každý jednotlivý element.

Teraz môžeme zavolať funkciu createDefaultTable() a vytvoriť tabuľku v dokumente. Funkciu spustíme pri načítaní stránky pomocou udalosti onload na objekte window. Takto zaistíme, že tabuľka bude vytvorená a pripravená na použitie ihneď po načítaní stránky:

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

Tabuľka bude vyzerať takto:

Table editor
localhost

V konzole nájdeme štruktúru vytvorenej tabuľky na záložke Elements:

Zobrazenie štruktúry vytvorenej tabuľky v konzole - Základné konštrukcie jazyka JavaScript

Tvorba tlačidiel

Tabuľku máme pripravenú a môžeme sa zamerať na doplnenie tlačidiel, ktoré užívateľovi umožnia tabuľku upravovať. Pretože ich bude viac, vytvoríme si pre pridanie tlačidla ďalšiu funkciu s názvom createButton(). V parametri jej budeme zadávať text, ktorý má byť tlačidlu nastavený ako popis. Funkcia teda vytvorí tlačidlo, nastaví mu popis, vloží ho do predka a vráti ho:

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

Tlačidlo vraciame kvôli tomu, aby sme mu mohli neskôr nastaviť obsluhu udalosti.

Teraz vytvoríme samotné tlačidlá. Urobíme to vo funkcii createControlButton(), kde budeme volať našu pomocnú funkciu:

function createControlButtons() {
    createButton("Insert row below");
    createButton("Insert row above");
    createButton("Insert column to left");
    createButton("Insert column to right");
    createButton("Remove row");
    createButton("Remove column");
}

Vrátené tlačidlá si neukladáme, neskôr im tu priradíme obsluhu udalosti.

Volanie funkcie createButton() by sme mohli vložiť do cyklu a načítať v ňom popisky tlačidiel, ktoré by sme mali uložené v poli. Neskôr tu však budeme nastavovať obsluhu udalostí pre každé tlačidlo, preto tu necháme vytvoriť tlačidlá samostatne.

Funkciu zavoláme v obsluhe udalosti window.onload:

window.onload = function () {
    createControlButtons(); // we added this line
    createDefaultTable();
}

Výsledok:

Table editor
localhost

Funkcie pre tvorbu riadku

Na záver si dnes ešte napíšeme funkciu, ktorú zavoláme, keď budeme chcieť vytvoriť nový riadok. Vytvoríme v nej nový element <tr> a vložíme doň rovnaký počet buniek, ako majú už existujúce riadky. Aktuálny počet buniek vezmeme z prvého riadku a získame ho pre názornosť najprv postupne v troch krokoch:

let firstRow = table.firstElementChild; // gets the first row of the table, element <tr>
let firstRowCells = firstRow.querySelectorAll("td"); // gets all the <td> elements of the first row
let firstRowCellsCount = firstRowCells.length; // returns the number of retrieved <td> elements

Najprv sme vyhľadali prvý riadok tabuľky, v ktorom som našli všetky elementy <td> a pomocou vlastnosti length zistili ich počet.

Teraz uvedené kroky zreťazíme a zapíšeme všetko priamo do premennej firstRowCellsCount V Prvnom Radku. Podobne budeme vlastnosti a metódy zreťazovať aj v ďalších funkciách:

let firstRowCellsCount = table.firstElementChild.querySelectorAll("td").length;

Premennú firstRowCellsCount potom využijeme v cykle, ktorým naplníme nový riadok zodpovedajúcim počtom nových buniek. Vytvorený riadok nakoniec vrátime. Celý kód funkcie createRow() bude vyzerať takto:

function createRow() {
    let newRow = document.createElement("tr");
    let firstRowCellsCount = table.firstElementChild.querySelectorAll("td").length;

    for (let i = 0; i < firstRowCellsCount; i++) { // the loop will have the same number of iterations as the first row cells
        newRow.appendChild(createCell()); // we add one new cell to every new row
    }
    return newRow;
}

Funkciu na pridanie riadka máme týmto pripravenú, neskôr ju budeme v aplikácii volať na pridanie riadka pred aktívnu bunku alebo za ňou.

V ďalšej lekcii, Dokončenie editora tabuliek v JavaScripte, sa naučíme do editora tabuliek vkladať nové stĺpce a riadky. Doplníme do neho aj funkcie na ich zmazanie.


 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 4x (1.56 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

 

Predchádzajúci článok
Tvorba elementov a hierarchie DOM v JavaScripte
Všetky články v sekcii
Základné konštrukcie jazyka JavaScript
Preskočiť článok
(neodporúčame)
Dokončenie editora tabuliek v JavaScripte
Článok pre vás napísal Michal Žůrek - misaz
Avatar
Užívateľské hodnotenie:
8 hlasov
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