Java týden Java týden
Pouze tento týden sleva až 80 % na celý Java e-learning!
Brno? Vypsali jsme pro vás nové termíny školení OOP v Brně!

Lekce 10 - Editor tabulek v JavaScriptu

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Manipulace s DOM v JavaScriptu, jsme se naučili pracovat s DOM a měnit tak obsah stránky. Již umíme vše potřebné, abychom si vytvořili nějakou pravou webovou aplikaci. Jako příklad, na kterém se zároveň něco málo přiučíme, si v dnešním JavaScript tutoriálu naprogramujeme editor tabulek.

Tabulka je velmi zajímavý a specifický prvek webových stránek. Tabulka má řádky <tr> a buňky <td>. <td> náleží <tr> a <tr> náleží v nejjednodušším případě <table>.

HTML

Vytvořme si nějakou stránku, CSS soubor a JS soubor. CSS a JS do stránky v hlavičce naimportujeme a tím máme stránku hotovou, to že je body prázdné, nám spíše dokonce vyhovuje, 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. Abychom měli kód nějakým způsobem jednotný, protože v dalších JS lekcích budeme skript zdokonalovat, HTML stránka vypadá následovně. Všímejte si názvu souborů.

<!DOCTYPE html>
<html lang="cs">
        <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>

JavaScript

V souboru editor-tabulek.js si vytvoříme 3 proměnné. Proměnná tabulka bude obsahovat samotnou tabulku a poté budeme mít proměnné vychoziVelikostX a vychoziVelikostY pro výchozí velikost tabulky. Tabulku necháme bez hodnoty a proměnným pro výchozí velikost dosadíme nějaká 2 kladná rozumně velká čísla. Např.:

let tabulka;
let vychoziVelikostX = 5;
let vychoziVelikostY = 3;

Později budeme potřebovat ještě jednu proměnnou, ale tou se nyní nebudeme zabývat. Vytvoříme funkce pro vygenerování ovládacích tlačítek a samotné tabulky. Funkci pro vygenerování tlačítek si necháme na později.

Funkce pro vytvoření tabulky (pojmenujeme si ji vytvorVychoziTabulku()) vytvoří tabulku a vloží ji do body. Dvěma vnořenými cykly vytvoříme její buňky. Aby byly buňky editovatelné, vložíme do nich klasické textové pole – element <input>. Protože buňky budeme vytvářet na více místech, vytvoříme si pro jejich tvorbu funkci vytvorBunku(). Ta vytvoří element <td> a <input>. <input> vloží do <td> a buňku vrátí. Jelikož budeme programovat funkce, které v tabulce předpokládají označenou buňku, při označení buňky si tuto buňku musíme někam uložit. Existuje událost focus, která je vyvolána ve chvíli, kdy uživatel vybere nějaký prvek, ať již do něj klikne nebo se na něj třeba přesune tabulátorem. Při vytváření buňky událost tedy zároveň nově vytvořenému inputu obsloužíme a do proměnné aktivniBunka (kterou deklarujeme před deklarací funkce) buňku uložíme v případě, že je označená. Je třeba pamatovat na to, že při obsluhování události se mění obsah klíčového slova this na prvek, který událost vyvolal. Do proměnné aktivniBunka uložíme právě this (což bude element <input>, protože on vyvolal událost).

let aktivniBunka;

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

Vraťme se k funkci, která vytvoří výchozí tabulku. Nejprve se vrhneme na vytvoření samotné tabulky.

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

Do proměnné tabulka uložíme nově vytvořený element <table> a ten vložíme do elementu <body>. Všimněte si, že když se chceme dostat k <body>, nemusíme složitě přes getElementsByTagName() nebo podobné, ale element je předpřipravený v document.body.

Nyní se podívejme na samotné cykly. Nejprve vytvoříme elementy řádku (cyklus y) a každý nový řádek ihned vložíme do tabulky (ostatně vkládání je lepší vždy dělat dříve, než na to později zapomenout). Poté vnořeným cyklem vytvoříme jednotlivé buňky a přidáme je do řádku. Využijeme k tomu metodu vytvorBunku(), kterou jsme si připravili před chvílí. Cyklům jako horní hodnoty předáme proměnné vychoziVelikostX a vychoziVelikostY tak, aby se vytvořil správný počet řádků a sloupců.

function vytvorVychoziTabulku() {
        tabulka = document.createElement("table");
        document.body.appendChild(tabulka);
        for (let y = 0; y < vychoziVelikostY; y++) {
                let tr = document.createElement("tr");
                tabulka.appendChild(tr);

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

Nyní již máme základ hotový. V obsluze události onload na objektu window tuto funkci zavoláme.

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

Takováto obsluha událostí by vám již měla být dobře známa. Jedná se o anonymní funkci přiřazenou do obsluhy události po načtení stránky. Když aplikaci spustíme, uvidíme tabulku (nejspíše bez ohraničení) a v ní inputy.

Editor tabulek
localhost

CSS

Gratuluji, vytvořili jste první aplikaci, která vygenerovala tabulku. Než se pustíme do další části, ostylujme si ji, ať vypadá trochu k světu. CSS nebudu popisovat. Pokud nějaké vlastnosti nerozumíte, naleznete ji popsanou v českém CSS 3 manuálu.

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%;
}

Tabulka bude vypadat přibližně takto.

Editor tabulek
localhost

Další funkce

Nyní budeme implementovat další funkce našeho editoru. Půjdeme na to postupně. Aby naše funkce mohl uživatel používat, musíme mu přidat nějaké ovládací prvky, kterými je vyvolá. Prakticky jsem chtěl říci, že budeme potřebovat tlačítka :), ale teoreticky bychom mohli využít i jiných prvků.

Protože funkcí bude více, byl by nesmysl neustále psát ...createElement("button"). Vytvoříme si na to funkci vytvorTlacitkoAVlozHo(). Funkce bude brát dva parametry - popisek a předka. Vytvoří tlačítko, nastaví mu popisek, vloží ho do předka a vrátí ho. Tlačítko vracíme jen kvůli tomu, abychom mu mohli nastavit obsluhu události. I tu bychom teoreticky mohli předat jako callback, ale tím bychom zbytečně znepřehlednili zdrojový kód.

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

Nyní vytvoříme samotná tlačítka funkcím. Cílem tohoto projektu bude naprogramovat funkce pro přidání sloupce a řádku podle vybrané buňky (tu máme uloženou v proměnné aktivniBunka) a funkci pro odstranění řádku a sloupce. Vytvoříme si funkci vytvorOvladaciTlacitka(). Ve funkci budeme volat metodu pro vytvoření tlačítka. Vrácená tlačítka si ani nemusíme ukládat, protože obsluhu události můžeme přiřadit rovnou vrácené hodnotě. Prozatím si necháme tlačítka takto:

function vytvorOvladaciTlacitka() {
        vytvorTlacitkoAVlozHo("Přidat řádek dolů", document.body);
        vytvorTlacitkoAVlozHo("Přidat řádek nahoru", document.body);
        vytvorTlacitkoAVlozHo("Přidat sloupec vlevo", document.body);
        vytvorTlacitkoAVlozHo("Přidat sloupec vpravo", document.body);
        vytvorTlacitkoAVlozHo("Odstranit řádek", document.body);
        vytvorTlacitkoAVlozHo("Odstranit sloupec", document.body);
}

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

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

Výsledek:

Editor tabulek
localhost

Přidat řádek

Začneme tím jednodušším – řádkem. Protože máme dvě funkce editoru, které nějakým způsobem vytvoří řádek a někam ho vloží, napíšeme si funkci, která nám vytvoří element <tr> a vloží do něj tolik buněk, aby jich bylo jako u nějakého z již existujících řádků. Počet buněk bude nejjednodušší vzít hned z prvního řádku.

function vytvorRadek() {
        let novyRadek = document.createElement("tr");

        for (let i = 0; i < tabulka.firstElementChild.childNodes.length; i++) {
                novyRadek.appendChild(vytvorBunku());
        }
        return novyRadek;
}

Je třeba si uvědomit co je v které proměnné. Jako maximální hodnota pro i v cyklu je totiž table.firstElementChild.childNodes.length a na první pohled jsme pouze schopni říci, že to má něco společného s tabulkou (table) a délkou (length). Ostatní již na první pohled není až tak jasné. Ideální je, když si formou komentáře zapíšeme co kde je nebo si hodnoty postupně rozložíme do proměnných, ať se nám v zápisu lépe orientuje.

Element <table> má elementy <tr>. Víme tedy, že table.firstElementChild je element <tr>, childNodes jsou všechny elementy <td>, tedy pole elementů <td> a length je délka tohoto pole. Výsledkem tedy je, že table.firstElementChild.childNodes.length obsahuje počet buněk prvního řádku tabulky. Zápis je na vás, buď si to můžete postupně ukládat do proměnných.

let prvniRadek = tabulka.firstElementChild;
let bunkyPrvnihoRadku = prvniRadek.childNodes;
let pocetBunekVPrvnimRadku = bunkyPrvnihoRadku.length;

Nebo si to nějak zjednodušeně poznamenáte formou komentáře, ať i příští rok víte co výraz znamená.

/*
 * table = <TABLE>
 * table.firstElementChild = <TR>
 * table.firstElementChild.childNodes = [<TD>]
 * table.firstElementChild.childNodes.length = number
 *
 * table.       firstElementChild.      childNodes      .length
 * <TABLE>.     <TR>.                   [<TD>]          .length
 */

Můžete si zkusit procvičovat orientaci v kódu, jako ochutnávku si zkuste nějak promyslet co kde bude, když budeme mít tuto podmínku (v příští lekci tam skutečně bude):

if (table.childNodes[i].childNodes[indexOfSelected] == table.childNodes[i].lastElementChild) { }

V další lekci, Dokončení editoru tabulek v JavaScriptu, budeme pokračovat.


 

Stáhnout

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

 

 

Článek pro vás napsal Michal Žůrek - misaz
Avatar
Jak se ti líbí článek?
29 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.
Předchozí článek
Manipulace s DOM v JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Miniatura
Následující článek
Dokončení editoru tabulek v JavaScriptu
Aktivity (11)

 

 

Komentáře

Avatar
Richard
Člen
Avatar
Richard:27.10.2014 15:15

Fajn clanek. Jen se zeptam, proc nevyuzit jquery?

Odpovědět 27.10.2014 15:15
$action = $_GET['Life']; | Když dáš mínus, napiš proč!
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Richard
David Čápka:27.10.2014 15:30

Jquery není jediným frameworkem a na větší aplikace se nehodí, je jí věnován samostatný seriál. Toto jsou základy JS, které by měl každý znát :)

Odpovědět 27.10.2014 15:30
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Richard
Člen
Avatar
Odpovídá na David Čápka
Richard:27.10.2014 15:36

Nemam v tomhle moc rozhled, tak se zeptam mozna blbe, ale proc se na vetsi aplikace jquery nehodi?

Odpovědět 27.10.2014 15:36
$action = $_GET['Life']; | Když dáš mínus, napiš proč!
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Richard
David Čápka:27.10.2014 15:46

Hlavně proto, že není MVC. JQuery je spíše na pluginy než vysloveně na aplikace. Když děláš aplikaci se spoustou tlačítek a formulářových polí, tak potřebuješ bindingy, šablony a další věci, které ti jQuery neposkytne. Chceme tu učit společný základ JS, aby se každý mohl dále rozhodnout jakou cestou půjde.

Odpovědět  +2 27.10.2014 15:46
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Richard
Člen
Avatar
Odpovědět 27.10.2014 15:53
$action = $_GET['Life']; | Když dáš mínus, napiš proč!
Avatar
Odpovídá na Richard
Michal Žůrek - misaz:27.10.2014 15:56

protože článek se zabývá manipulaci s DOM v JavaScriptu, na namipulaci DOM v jQuery je tu celý tutoriál. Tady to bereme v JavaScriptu.

 
Odpovědět 27.10.2014 15:56
Avatar
Richard
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Richard:27.10.2014 15:58

Jo, jsem drevo, myslel jsem ze je to ukazkove reseni, nevsiml jsem si ze je to js tutorial.. omluva :)

Odpovědět 27.10.2014 15:58
$action = $_GET['Life']; | Když dáš mínus, napiš proč!
Avatar
Odpovídá na Richard
Michal Žůrek - misaz:27.10.2014 16:03

ono jde hlavně i o to, že manipulace s DOM je v JavaScriptu nutný základ. Přesně toto (editor tabulek) byl úkol v jednom nedávném machrovi a (jediný) řešitel pomalu ani nevěděl, že existuje nějaké insertBefore a cykl. Buňky vytvářel pomocí inline vytvoření přímo v těch metodách, obsah se editoval extrémě těžkopádně a vytvoření sloupce byl nadlidský úkol.

 
Odpovědět 27.10.2014 16:03
Avatar
hudcivladci
Člen
Avatar
hudcivladci:7.11.2014 18:28

Je to síce len drobnosť, ale

for (var i = 0; i < tabulka.firstElementChild.childNodes.length; i++) {
                novyRadek.appendChild(vytvorBunku())
}

by som upravil na

for(var i = 0, dlzka = tabulka.firstElementChild.childNodes.length; i < dlzka; i++) {
        novyRiadok.appendChild(vytvorBunku());
}

nemusíme tým pádom pri každom overovaní podmienku získavať veľkosť pola a tým pádom je to kúsok "efektívnejšie".

Nie je to veľká zmena, ale myslím si, že je to dobrá praktika :)

Inak fajn článok.

Editováno 7.11.2014 18:29
 
Odpovědět 7.11.2014 18:28
Avatar
Odpovídá na hudcivladci
Michal Žůrek - misaz:7.11.2014 18:36

je to o trochu rychlejší (nepoznatelně), ale spíš by to někoho mohlo mást.

 
Odpovědět  +1 7.11.2014 18:36
Avatar
michaldubny1
Člen
Avatar
michaldubny1:30.12.2014 8:26

nechapem preco ste nezolili nieco kratsie ako tutorial ... clovek ma vtom chaos

 
Odpovědět  +1 30.12.2014 8:26
Avatar
Odpovídá na michaldubny1
Michal Žůrek - misaz:30.12.2014 9:12

Takové články nemůžeš číst od shora dolů, ale musíš je číst postupně, čemu nerozumíš si přečíst víckrát a hlavně si všechno zkoušet. Vůbec nevadí, že se u nějakého odstavce zasekneš třeba na půl hodiny. Cvičení se schvalují, pak si je zkus.

 
Odpovědět  +2 30.12.2014 9:12
Avatar
dr.jalo2
Člen
Avatar
dr.jalo2:16.1.2015 14:28

Rychle odtestovanie funkcie: vytvorRadek()

window.onload = function () {
    vytvorOvladaciTlacitka();
    vytvorVychoziTabulku();
    tabulka.appendChild(vytvorRadek());
}
 
Odpovědět 16.1.2015 14:28
Avatar
Odpovídá na Michal Žůrek - misaz
Libor Šimo (libcosenior):15.4.2016 8:23

Michal, v niektorej z minulých častí tutoriálu som čítal, že stredníky sa nemusia používať, ale že sa aj tak používajú.
V tejto lekcii je to tak aj tak a myslím, že to trochu mýli.
Bolo by lepšie buď, aby tam neboli vôbec alebo všade, kde by mohli byť.

Odpovědět 15.4.2016 8:23
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Odpovídá na Libor Šimo (libcosenior)
Michal Žůrek - misaz:15.4.2016 16:57

já jsem zvyklý z jazyků kde se nepoužívají a ovlivněn jazyky kde se používají. V JavaScript je klidně striktně piš všude, já to nějak intuitivně kombinuji.

 
Odpovědět 15.4.2016 16:57
Avatar
romel999
Člen
Avatar
romel999:13.11.2016 10:05

Dobry den,

V prvním případě mi kód nefunguje a ve druhém případě, když jsem to zkopíroval tady z webu mi to jde.. Nemohu najít kde mám chybu. Děkuji za pomoc

var tabulka
var vychoziVelikostX = 5
var vychoziVelikostY = 3

var aktivniBunka;

function vytvorBunku() {
var td = document.crea­teElement("td")

var tdInput = document.crea­teElement("in­put")

tdInput.type = "text"
tdInput.onfocus = function () {
aktivniBunka = this
}
td.appendChil­d(tdInput)

return td;
}

function vytvorVychozi­Tabulku() {
tabulka = document.crea­teElement("ta­ble")
document.body­.appendChild(ta­bulka)
for (var y = 0; y < vychoziVelikostY; y++) {
var tr = document.crea­teElement("tr")
tabulka.appen­dChild(tr)

for (var x = 0; x < vychoziVelikostX; x++) {
tr.appendChil­d(vytvorBunku())
}
}
}

window.onload = function () {
vytvorVyhoziTa­bulku();
}
_____________­________________________­________________________­_________________

var tabulka
var vychoziVelikostX = 5
var vychoziVelikostY = 3

var aktivniBunka;

function vytvorBunku() {
var td = document.crea­teElement("td")

var tdInput = document.crea­teElement("in­put")

tdInput.type = "text"
tdInput.onfocus = function () {
aktivniBunka = this
}
td.appendChil­d(tdInput)

return td;
}

function vytvorVychozi­Tabulku() {
tabulka = document.crea­teElement("ta­ble")
document.body­.appendChild(ta­bulka)
for (var y = 0; y < vychoziVelikostY; y++) {
var tr = document.crea­teElement("tr")
tabulka.appen­dChild(tr)

for (var x = 0; x < vychoziVelikostX; x++) {
tr.appendChil­d(vytvorBunku())
}
}
}

window.onload = function () {
vytvorVychozi­Tabulku();
}

 
Odpovědět 13.11.2016 10:05
Avatar
Libor Šimo (libcosenior):13.11.2016 15:18

Vypis uje ti to chybu v conzole?

Odpovědět 13.11.2016 15:18
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Odpovídá na romel999
Michal Žůrek - misaz:13.11.2016 16:55

na předposledním řádku máš překlep. Místo vychozi tam máš jenom h

vytvorVyhoziTabulku(); // tvoje
vytvorVychoziTabulku(); // správně
 
Odpovědět 13.11.2016 16:55
Avatar
Odpovídá na Michal Žůrek - misaz
Libor Šimo (libcosenior):13.11.2016 18:15

Conzola by mu riadok s chybou urcite oznacila.

Odpovědět 13.11.2016 18:15
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Odpovídá na Libor Šimo (libcosenior)
Michal Žůrek - misaz:13.11.2016 18:16

však já to nepopírám.

 
Odpovědět 13.11.2016 18:16
Avatar
Odpovídá na Michal Žůrek - misaz
Libor Šimo (libcosenior):13.11.2016 18:34

Jasne, aj ja som sa najprv pokusil najst chybu v texte, lebo to bolo jasne.
Problem je ale v ludskom mozgu.
Nejrozsirenajsi
precitas ako
Nejrozsirenejsi
a nevsimnes si chybu.
Preto som vdacny za prekladace a IDE.

Odpovědět  +3 13.11.2016 18:34
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Nocik
Člen
Avatar
Nocik:1.11.2017 17:06

Nechci být rejpal, ale příjde mi, že ukázkové zdrojáky, konkrétně 3. a 5. jsou přehozeny a chvíli trvá, než na to člověk mého "kalibru" dojde jestli chápete co tím chci říct :)

Odpovědět 1.11.2017 17:06
Vítězství je stav mysli.
Avatar
Nocik
Člen
Avatar
Nocik:1.11.2017 17:17

Omlouvám se, předchozí komentář je fail, trošku sem ukázal svoji blbost a nepozornost..:D

Odpovědět  +1 1.11.2017 17:17
Vítězství je stav mysli.
Avatar
Tomáš Mořkovský:5.1.2018 13:28

Zdravím,

v první část kódu mi v Atomu vůbec nejde zobrazit. Tabulka se zobrazí jen pokud kód začnu document,write(""), nevíte prosím někdo proč tomu tak je? předem díky.
přikládám svůj pokus:

document.write("E­ditor Tabulek")

var tabulka
var vychoziVelikostX = 5
var vychoziVelikostY = 3
var aktivniBunka;

function vytvorBunku(){
var td = document.crea­teElement("td")
var tdInput = document.crea­teElement("in­put")

tdInput.type="text"
tdInput.onfocus= function(){
aktivniBunka = this
}
td.appendChil­d(tdInput)
return td;

}
tabulka = document.crea­teElement("ta­ble")
document.body­.appendChild(ta­bulka)

function vytvorVychozi­Tabulku(){
tabulka = document.crea­teElement("ta­ble")
document.body­.appendChild(ta­bulka)
for (var y = 0;y <vychoziVelikostY; y++){
var tr = document.crea­teElement("tr")
tabulka.appen­dChild(tr)

for (var x = 0; x < vychoziVelikostX; x++){
tr.appendChil­d(vytvorBunku())
}
}
}
window.onload = function () {
vytvorVychozi­Tabulku();
}

 
Odpovědět 5.1.2018 13:28
Avatar
Tomáš Pour
Člen
Avatar
Tomáš Pour:6.6.2018 20:25

Ahoj, zasekl jsem se téměř na začátku, kdy má Brackets problém hned s první řádkou aplikace...když změním "let" na "var", tak přeskočí error na další řádek a když změním všechny, tak mi to vypíše errorů hned několik...

 
Odpovědět 6.6.2018 20:25
Avatar
Odpovídá na Tomáš Pour
Michal Žůrek - misaz:6.6.2018 21:39

co to máš za vývojové prostředí? Funguje to v prohlížeči?

 
Odpovědět 6.6.2018 21:39
Avatar
Tomáš Pour
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Tomáš Pour:6.6.2018 22:23

Momentálně používám Brackets. V prohlížeči to právě nejde.

 
Odpovědět 6.6.2018 22:23
Avatar
Odpovídá na Tomáš Pour
Michal Žůrek - misaz:6.6.2018 23:30

tak dej F12 a podívej se co to napsalo za chybu.

 
Odpovědět 6.6.2018 23:30
Avatar
Tomáš Pour
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Tomáš Pour:7.6.2018 15:04

Tak ta chyba v prvním řádku je nejspíš nesmysl, ale když dám F12, tak mi to vypíše tohle:

 
Odpovědět 7.6.2018 15:04
Avatar
Tomáš Pour
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Tomáš Pour:7.6.2018 15:09

Tak už jsem přišel na chybu...měl jsem tam místo

tabulka.appendChild(tr);

tohle

document.appendChild(tr);

a ikdyž jsem to opravil, musel jsem promazat cache v Chrome.
Díky za pomoc :-)

 
Odpovědět 7.6.2018 15:09
Avatar
Aleš Fišer
Člen
Avatar
Aleš Fišer:11.10.2018 20:14

Ahoj , mám s tím jen jeden problém.Ta tlačítka se mi zobrazují místo nad tabulkou pod tabulkou.Nevíte v čem by mohl být problém?

Díky

 
Odpovědět 11.10.2018 20:14
Avatar
Odpovídá na Aleš Fišer
Michal Žůrek - misaz:12.10.2018 9:40

pokud postupuješ přesně podle tutoriálu, tak jsi možná prohodil řádky

vytvorOvladaciTlacitka();
vytvorVychoziTabulku();

Protože obě funkce přidávají elementy, tak se elementy logicky přidávají v takovém pořadí v jakém se volají funkce.

 
Odpovědět  +1 12.10.2018 9:40
Avatar
Aleš Fišer
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Aleš Fišer:15.10.2018 6:01

Děkuji ,problém byl přesně v tomto :)

 
Odpovědět 15.10.2018 6:01
Avatar
Miroslav Pomšár:17. ledna 21:52

Ahoj prosim o radu, snažím se dostat mezi tlačítka a tabulku volny řádek, mnoho pokusů s document.write("<br \>") i s funkcí např : function vlozRadek() {
let linebreak = document.crea­teElement("br");
body.appendChil­d(linebreak);
} , nicméně stále bez výsledku :(. Díky

 
Odpovědět 17. ledna 21:52
Avatar
Odpovídá na Miroslav Pomšár
Michal Žůrek - misaz:17. ledna 23:41

Takové věci se dělají přes CSS. nastav tabulce margin. Linebreak by měl fungovat, zkus se podívat do nástrojů pro vývojáře (klávesa F12) jestli to někde nezhavarovalo.

 
Odpovědět 17. ledna 23:41
Avatar
shiny
Člen
Avatar
shiny:14. srpna 8:55

Zdravím prosim o radu

let prvyRiadok = tabulka.firstE­lementChild;
let bunkyPrvehoRiadku = prvyRiadok.chil­dNodes;
let pocetBuniekVPrvom­Riadku = bunkyPrvehoRi­adku.length;

v tejto časti mi vypisuje na chrome error: Uncaught TypeError: Cannot read property 'firstElementChild' of undefined

ďakujem za radu :)

Editováno 14. srpna 8:58
 
Odpovědět 14. srpna 8:55
Avatar
Odpovídá na shiny
Michal Žůrek - misaz:Včera 19:19

proměnná tabulka je nenačtená.

 
Odpovědět Včera 19:19
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 37 zpráv z 37.