Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
Discount week - April - 30

Lekce 11 - Dokončení editoru tabulek v JavaScriptu

V minulé lekci, Editor tabulek v JavaScriptu, jsme rozpracovali editor tabulek, který umožní uživateli tabulky rozšiřovat a upravovat.

V dnešním JavaScript tutoriálu si dáme velkou porci manipulace s elementy DOM. Budeme vkládat sloupce a řádky před, za, nad, pod a budeme je i mazat.

Index řádku aktivní buňky

Abychom si techniky "orientování se" v proměnných DOM osvojili, napíšeme si 2 funkce, které později využijeme. Jednou z nich je funkce indexRadkuAktivniBunky(), která vrátí index řádku (pořadí od nuly), kde se nachází uživatelem vybraná buňky (aktivniBunka). Nejprve si je třeba uvědomit, kde tento index získáme. Hledáme mezi řádky tabulky. Tabulka je představována elementem <table> a řádky jsou ihned v něm (buňky jsou až v řádcích, což může mást, dávejte si na to pozor).

Kde budeme hledat: tabulka.childNodes

A co hledáme, bude to trochu složitější. Hledáme řádek, ale my víme, že v aktivniBunka není element <td>, ale <input>, který je v <td>. Abychom se dostali na <td>, musíme z buňky dostat parentElement a ani to nám nebude stačit. Nepotřebujeme buňku, ale řádek a ten opět získáme pomocí parentElement.

Co hledáme: aktivniBunka.parentElement.parentElement

NodeList a indexOf()

Jestli si vzpomínáte, tak v minulé JS lekci jsem zmínil, že funkce s DOM nikdy nevrací pole, ale NodeList nebo podobné specializované kolekce. A že tyto objekty jsou jen (prakticky) hloupější pole. Bohužel NodeList nemá metodu indexOf(), která by nám vrátila potřebný index prvku. Jsou dvě varianty. První je, že si ho cyklem proiterujeme sami a druhá je, že použijeme metodu indexOf() na objektu Array a zavoláme ji s kontextem NodeListu. Druhou část předchozího souvětí důkladně pochopíte u objektově orientovaného programování. Zatím nám stačí vědět, že zavoláme indexOf() na poli, ale "podvrhneme" mu NodeList. JavaScriptu je totiž jedno s čím pracuje, pokud to má vše co má mít a NodeList tuto vlastnost splňuje. Metody se volají se změněným kontextem tak, že je najdeme v prototypu objektu (v našem případě Array.prototype) a zavoláme na ně metodu call(). Jako první parametr ji předáme nový kontext a za ně přidáme parametry metody.

Výsledný kód by tak mohl vypadat následovně:

function indexRadkuAktivniBunky() {
    let cilHledani = tabulka.childNodes;
    let hledanyPrvek = aktivniBunka.parentElement.parentElement;
    return Array.prototype.indexOf.call(cilHledani, hledanyPrvek);
}

cilHledani máme to, v čem hledáme. V hledanyPrvek máme co hledáme. V cilHledani je NodeList a hledanyPrvek je element <tr>. Poté vrátíme hodnotu, kterou vrátí indexOf(), načež ji změníme kontext na NodeList a jako parametr, který má běžně, předáme onen element <tr>.

Index sloupce aktivní buňky

O něco jednodušší to bude se získáváním indexu sloupce aktivní buňky. Potřebujeme se dostat k řádku, kde se buňka nachází a získat její pozici. Buňku opět dostaneme pomocí parentElement na aktivniBunka a k řádku, kterému náleží přes parentElement.parentElement.

function indexSloupceAktivniBunky() {
    let bunkyVRadku = aktivniBunka.parentElement.parentElement.childNodes;
    let td = aktivniBunka.parentElement;
    return Array.prototype.indexOf.call(bunkyVRadku, td);
}

Doteď to možná bylo trochu nudné, protože se nic zajímavého nedělo. Nyní to však bude zajímavější. Již konečně začneme programovat funkce pro ovládání aplikace.

Přidání řádku nad vybraný

Metodu, která vytváří nový řádek (element <tr>), máme již hotovou. Umíme získat index řádku, na kterém leží vybraná buňka, a umíme nový řádek i vložit. Pro přehlednost si nový řádek uložíme do proměnné, index řádku stejně tak a opět se budeme prokousávat DOMem. Řádky (<tr>) jsou vnořené přímo v elementu tabulky (<table>), takže to bude jednoduché. Metodu insertBefore() voláme na tabulce. První parametr je jasný, to je nový řádek. Druhý parametr musí být <tr>, ve kterém je vložena aktivní buňka. Dále se propracovávat nemusíme, řádky jsou přímo v tabulce, proto rovnou z NodeListu vybereme řádek podle indexu řádku aktivní buňky.

function pridejRadekNahoru() {
    let radek = vytvorRadek();
    let indexVybraneho = indexRadkuAktivniBunky();
    tabulka.insertBefore(radek, tabulka.childNodes[indexVybraneho]);
}
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Ve funkci, která vytváří ovládací tlačítka, obslužme tlačítku pro přidání řádku nahoru událost onclick.

vytvorTlacitkoAVlozHo("Přidat řádek nahoru", document.body).onclick = pridejRadekNahoru;

Nyní se pustíme do trochu silnější kávy, ale vlastně to nebude nic nového.

Přidávání řádku za vybraný

Zde budeme postupovat prakticky stejně, ale doplatíme opět na to, že JavaScript neobsahuje žádnou metodu insertAfter() a my budeme muset řádek vkládat před aktuální + 1, abychom ho dostali na správnou pozici. Pamatujme, že u toho ještě musíme ošetřovat, zda takto nevkládáme za poslední, protože řádek poslední + 1 neexistuje. Použijeme podmínku ke zjištění, zda je poslední element tabulky (tabulka.lastChild) roven řádku, ve kterém je vybraná aktuální buňka. Pokud je, tak vkládáme nakonec jednoduše metodou appendChild(). V opačném případě vložíme řádek pomocí insertBefore() před řádek za řádkem s vybranou buňkou.

function pridejRadekDolu() {
    let radek = vytvorRadek();
    let indexVybraneho = indexRadkuAktivniBunky();
    if (tabulka.lastChild == tabulka.childNodes[indexVybraneho]) {
        tabulka.appendChild(radek);
    } else {
        tabulka.insertBefore(radek, tabulka.childNodes[indexVybraneho + 1]);
    }
}

Nastavte obsluhu události danému tlačítku:

vytvorTlacitkoAVlozHo("Přidat řádek dolů", document.body).onclick = pridejRadekDolu;

Nyní již umíme přidávat řádky různě do tabulky, kde se nám hodí. Funkcionalitu si můžete vyzkoušet v živé ukázce níže, nezapomeňte ovšem předtím označit nějakou buňku tabulky kliknutím do ní.

Editor tabulek
localhost

Přidání sloupce vlevo

Přidání sloupce již bude složitější. Tabulka v HTML totiž obsahuje řádky a v těch jsou buňky. A ejhle, v kódu nejsou žádné sloupce! Přidání sloupce budeme muset tedy řešit tak, že přidáme buňku do existujících řádků. Cyklem projedeme všechny řádky tabulky a do každého řádku před index vybrané buňky vložíme novou buňku.

Nyní je třeba si uvědomit co je kde a co budeme kde potřebovat. Budeme vkládat do řádku <tr> a ten je v <table>. Výraz tabulka.childNodes vrací pole řádků <tr> a my musíme vkládat v cyklu do každého z nich novou buňku.

Kam vkládáme: tabulka.childNodes[i]

Vkládáme novou buňku.

Co vkládáme: vytvorBunku()

A teď před co. Referenční element (ten, před který vkládáme) musí být uvnitř elementu, kam vkládáme. Jednoduše tedy začneme tím, že předáme ten samý element, do kterého vkládáme. Protože je to element zevnitř, logicky ho nalezneme uvnitř NodeListu childNodes a víme, že tento childNodes je pole prvků buněk <td> (Hurá! Ty hledáme!). Index tedy (který je pro daný cyklus konstantní) bude onen index buňky mezi sloupci. Pokud jste se ve výkladu ztratili, zkuste si to projít níže v kódu.

Před co vkládáme: tabulka.childNodes[i].childNodes[indexVybraneho]

Celé to bude vypadat následovně.

function pridejSloupecDoleva() {
    let indexVybraneho = indexSloupceAktivniBunky();
    for (let i = 0; i < tabulka.childNodes.length; i++) {
        tabulka.childNodes[i].insertBefore(vytvorBunku(), tabulka.childNodes[i].childNodes[indexVybraneho]);
    }
}

Pokud vám to přišlo složité nebo nepřehledné, tak než se pustíte do další části (protože ta je k orientaci ještě o něco těžší), doplňte si vhodně komentáře nebo si kód rozdělte do rozumně pojmenovaných proměnných.

Přidání sloupce vpravo

Jak již asi tušíte, bude to podobné, pouze se musíme opět vyrovnat s chybějící metodou insertAfter() jako jsme to udělal v metodě pridejRadekDolu(). Jediným rozdílem (opět) je, že musíme ověřit, že nevkládáme na konec. Logicky dojdeme k tomu, že ověřujeme vždy to, co vkládáme s posledním elementem rodiče ověřovaného elementu.

function pridejSloupecDoprava() {
    let indexVybraneho = indexSloupceAktivniBunky();
    for (let i = 0; i < tabulka.childNodes.length; i++) {
        if (tabulka.childNodes[i].childNodes[indexVybraneho] == tabulka.childNodes[i].lastElementChild) {
            tabulka.childNodes[i].appendChild(vytvorBunku());
        } else {
            tabulka.childNodes[i].insertBefore(vytvorBunku(), tabulka.childNodes[i].childNodes[indexVybraneho + 1]);
        }
    }
}

Přidejme obsluhy událostí tlačítkům pro přidávání sloupců a aplikaci vyzkoušejte.

vytvorTlacitkoAVlozHo("Přidat sloupec vlevo", document.body).onclick = pridejSloupecDoleva;
vytvorTlacitkoAVlozHo("Přidat sloupec vpravo", document.body).onclick = pridejSloupecDoprava;

Aplikaci vyzkoušejte. Po náročné práci si můžete zahrát třeba piškvorky ve vaší tabulce. Jednoduše si přidejte hodně sloupců a řádků :)

Editor tabulek
localhost

Možná při používání aplikace narazíme na problém. Tabulka může mít o sloupec nebo řádek více, než jsme chtěli. Přidáme funkce pro mazání řádku a sloupce.

Mazání řádku

Z tabulky odstraníme řádek, jehož element dostaneme tak, že vezmeme všechny elementy tabulky (childNodes) a vybereme ten s indexem vybrané buňky.

function smazRadek() {
    let indexVybraneho = indexRadkuAktivniBunky();
    tabulka.removeChild(tabulka.childNodes[indexVybraneho]);
}

Mazání sloupce

Mazání sloupce musíme zajistit tak, že smažeme v každém řádku (cyklem) buňku, jejíž index odpovídá indexu vybrané buňky.

function smazSloupec() {
    let indexVybraneho = indexSloupceAktivniBunky();
    for (let i = 0; i < tabulka.childNodes.length; i++) {
        tabulka.childNodes[i].removeChild(tabulka.childNodes[i].childNodes[indexVybraneho]);
    }
}

Zprovozníme tlačítka a máme hotovo.

vytvorTlacitkoAVlozHo("Odstranit řádek", document.body).onclick = smazRadek;
vytvorTlacitkoAVlozHo("Odstranit sloupec", document.body).onclick = smazSloupec;

Aplikaci si můžete vyzkoušet:

Editor tabulek
localhost

Po tomto příkladu byste již měli ovládat DOM v JavaScriptu. Všechna ta kouzla od vytváření tabulky až po piškvorky byly vlastně jen hříčky s několika málo elementy, které bychom běžně psali v HTML. Všimněte si, že na začátku všeho máme HTML kód, který v body nemá jediný element.

V příští lekci, Striktní operátory a přetypování v JavaScriptu, si řekneme něco o podmínkách, než se pustíme do dalšího většího tématu - práce s grafikou.


 

Měla 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 879x (2.4 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Editor tabulek v JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Článek pro vás napsal Michal Žůrek - misaz
Avatar
Jak se ti líbí článek?
24 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 (18)

 

 

Komentáře

Avatar
Martin Málek:26.1.2016 8:38

Ahoj, díky za článek, je super :) jen malinká drobnost k upravení, v odstavci "Přidání řádku nad vybraný" by mělo být

vytvorTlacitkoAVlozHo("Přidej řádek nahoru", document.body).onclick = PridejRadekNahoru;

místo

vytvorTlacitkoAVlozHo("Add row down", document.body).onclick = PridejRadekDolu;

to ale asi všichni pochopili :)

 
Odpovědět
26.1.2016 8:38
Avatar
daniel.mareda:10.4.2016 22:40

Ahoj, mám dotaz

proč je funkce

tdInput.onfocus = function () {
                aktivniBunka = this
        }

uvnitř funkce na vytvoření tabulky. Vždyť když budu chtít mazat (v dalším díle) tak přece nepoužiju funkci vytvořněco a přesto potřebuju vědět co je pod aktivniBunka

 
Odpovědět
10.4.2016 22:40
Avatar
Odpovídá na daniel.mareda
Michal Žůrek - misaz:11.4.2016 8:03

to je callback, který se nastavuje každé vytvářené buňce tabulky událost, která nastane při zaktivování buňky, tak aby jsi při volání funkcí (třeba funkce mazání) kterou buňku chce uživatel smazat.

Ten callback je v paměti a zavolá se až v okamžiku kdy uživatel zaktivuje buňku, nikoli v okamžiku kdy buňku vytváříme.

 
Odpovědět
11.4.2016 8:03
Avatar
daniel.mareda:11.4.2016 21:30

takže anonymní funkce

tdInput.onfocus = function () {
aktivniBunka = this
}

může být zavolána bez toho aniž bychom volali funkci vytvorBunku() ve který se nachází?

 
Odpovědět
11.4.2016 21:30
Avatar
Odpovídá na Michal Žůrek - misaz
Libor Šimo (libcosenior):15.4.2016 12:08

Píšem to v PSPad-e a tam to neukazuje chyby.
Ako vytvoriť funkciu na kontrolu (výpis) výstupov z rôznych funkcií, aby som mal istotu, že fungujú správne?

Odpovědět
15.4.2016 12:08
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):15.4.2016 12:23

Pridal som na skúšku funkciu:

function vystup() {
         alert(indexRiadkuAktivnejBunky());
}

a do funkcie function vytvorOvladaci­eTlacitka()
som pridal:

vytvorTlacitkoAVlozHo("Kontrola", document.body).onclick = vystup;

Nefunguje mi to.
Myslím, že to znamená, že mám niekde v kóde chybu. :-(

Editováno 15.4.2016 12:24
Odpovědět
15.4.2016 12:23
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):15.4.2016 12:51

Keď to zmením na
alert(indexRi­adkuAktivnejBun­ky);
vypíše mi to funkciu, ale nie návratovú hodnotu.
Čomu nerozumiem?

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

doporučuji vypisovat přes

console.log(coChcešVypsat);

a přes F12 se podívat jednak co to vypsalo, jednak jestli to nespadlo na chybě.

 
Odpovědět
15.4.2016 17:00
Avatar
Odpovídá na Michal Žůrek - misaz
Libor Šimo (libcosenior):16.4.2016 8:16

A kam to mám napísať? Dal som to do

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

a po spustení a stlačení F12 to nič nevypisuje.

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

Pak ještě zaktualizuj stránku. Některé prohlížeče to neumí najit zpětně. A jinak je to blbost, dokud nevybereš buňku, tak zadny indexVybrane proste není.

 
Odpovědět
16.4.2016 12:17
Avatar
Michal
Člen
Avatar
Michal:18.4.2016 9:43

Po kliknutí na button "Pridaj riadok hore" mi vypise chybu :
Uncaught TypeError: Array.prototy­pe.indexOf called on null or undefined
Prikladám aj zdroják.

 
Odpovědět
18.4.2016 9:43
Avatar
Odpovídá na Michal
Libor Šimo (libcosenior):18.4.2016 15:05

Toto som si upravil podľa stiahnutého vzoru:

function vytvorRiadok() {
         var novyRiadok = document.createElement("tr");
         var prvyRiadok = tabulka.firstElementChild;
             var bunkyPrvehoRiadku = prvyRiadok.childNodes;
             var pocetBuniekVPrvomRiadku = bunkyPrvehoRiadku.length;

         for (var i = 0; i < pocetBuniekVPrvomRiadku; i++) {
             novyRiadok.appendChild(vytvorBunku());
         }

         return novyRiadok;
}

V článku je to inakšie a aj ty to máš inakšie.
Možno je chyba tam.

Odpovědět
18.4.2016 15:05
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Odpovědět
18.4.2016 15:35
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Nezmar Hydra
Člen
Avatar
Nezmar Hydra:6.10.2016 2:50

Jak můžu v javě sloučit buňky tabulky?
Jejich oindexování jsem vyřešil taklenc:

var td = document.crea­teElement("td")
var tdInput = document.crea­teElement("tex­t")
var oindexuj = document.crea­teElement("ID")
x = x+1;
oindexuj.id=("tab"+x­);
tdInput.textContent = x;
td.appendChil­d(oindexuj).ap­pendChild(tdIn­put);
return td;

ale jak mu říct, aby sloučil buňky s vybranými indexy na to jsem nepřišel.
Díky za radu.

 
Odpovědět
6.10.2016 2:50
Avatar
Odpovídá na Nezmar Hydra
Michal Žůrek - misaz:8.10.2016 0:12

hmmm, takhle to nepůjde chtělo by si to prustudovat základy HTML. Tvůj kód vytváří vpodstatě následující HTML.

<td>
    <ID id="tabX">
        <text>
        X
        </text>
    </ID>
</td>

a takhle tabulky v HTML nefungují.

 
Odpovědět
8.10.2016 0:12
Avatar
Nezmar Hydra
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Nezmar Hydra:8.10.2016 1:28

Ne to mi funguje fajn. mam oIDéčkovanou každou buňku a mužu si do ní přidávat co chci a kam chci. jen ten kód jsem nedal celej.
je to taklenc
function vytvorVychozi­Tabulku(vycho­ziVelikostX,vycho­ziVelikostY,I­DeckoKam,IDec­koPridel){
var tabulka;
var NUMindex = 0;
tabulka = document.crea­teElement("ta­ble");
document.getE­lementById(IDec­koKam).appendChil­d(tabulka);
for (var y = 0; y < vychoziVelikostY; y++)
{

var tr = document.crea­teElement("tr");
tabulka.appen­dChild(tr);
for (var x = 0; x < vychoziVelikostX; x++) {
NUMindex = NUMindex+1;
tr.appendChil­d(vytvorBunku(I­DeckoPridel,NU­Mindex));
}
}
}
function vytvorBunku(Tex­tIndes,index) {
var td = document.crea­teElement("td");
var tdInput = document.crea­teElement("tex­t");
var oindexuj = document.crea­teElement("ID");

oindexuj.id=(Tex­tIndes+index);
tdInput.textContent = (TextIndes+index);
td.appendChil­d(oindexuj).ap­pendChild(tdIn­put);
return td;
}

 
Odpovědět
8.10.2016 1:28
Avatar
Odpovídá na Nezmar Hydra
Michal Žůrek - misaz:8.10.2016 11:37

Buňky se dají spojit tak, že první buňce dáš attribute colspan nebo rowspan s hodnotou kolik sloupců/řádků to má sloučit.

 
Odpovědět
8.10.2016 11:37
Avatar
Jan Zamecnik
Člen
Avatar
Jan Zamecnik:26.10.2016 10:15

Funkce pro zjištění aktivní buňky jsem upravil následovně

function indexRadkuAktivniBunky() {
    if (aktivniBunka) {
        var cilHledani = tabulka.childNodes;
        var hledanyPrvek = aktivniBunka.parentElement.parentElement;
        return Array.prototype.indexOf.call(cilHledani, hledanyPrvek);
    } else
        return 0;
}

function indexSloupceAktivniBunky() {
    if (aktivniBunka) {
        var bunkyVRadku = aktivniBunka.parentElement.parentElement.childNodes;
        var td = aktivniBunka.parentElement
        return Array.prototype.indexOf.call(bunkyVRadku, td)
    } else
        return 0;
}

To proto, aby na začátku pokud není vybraná buňka použil index = 0

Editováno 26.10.2016 10:15
 
Odpovědět
26.10.2016 10:15
Avatar
Jan Zamecnik
Člen
Avatar
Jan Zamecnik:26.10.2016 10:44

Pro hraní piškvorek jsem přidal na začátek globální proměnou

var krizek = false;

a upravil funkci:

tdInput.onfocus = function () {
    aktivniBunka = this;
    if (krizek) {
        aktivniBunka.value = "X";
        krizek = false;
    } else {
        aktivniBunka.value = "O";
        krizek = true;
    }
};

Potom po kliknutí na buňku se přidá jednou křížek podruhé kolečko.

 
Odpovědět
26.10.2016 10:44
Avatar
koukalf
Člen
Avatar
koukalf:11.12.2016 22:46

Ahoj, super článek, rád bych se zeptal jak lze nahradit zápis aktivniBunka.pa­rentElement.pa­rent.Element nebo jenom aktivniBunka.pa­rentElement. Google chrome mi háže chybu index.js:158 Uncaught TypeError: Cannot read property 'parentElement' of undefined a já už vážně nevím co s tím.

Když jsem se pokusil o jiný zápis typu - tabulka.childNo­des, tak mi to vzal, ale tam je samozřejmě jiná funkčnost :)

Odpovědět
11.12.2016 22:46
Kvalitní program je jako báseň, pokud do něj nevložíš um, tak se nedá číst.
Avatar
Odpovídá na koukalf
Michal Žůrek - misaz:13.12.2016 19:15

ta chyby mohla vzniknout ze dvou důvodů.¨

1.) aktivni buňka je undefined
2.) parent aktivni buňky je je undefined

Dá se to jednoduše vyzkoušet. Klikni do nějaké buňky a v nástrojích pro vývojáře (F12) do konzole zadej aktivniBunka a uvidíš co se vypíše. Pokud nějaký element, který se nachází v DOMu, tak je to dobrý pokud undefined, tak je to blbý a nefunguje ti obsluha kliknutí na políčko v buňce. Pokud by to vypsalo element, tak si ještě můřžeš zkusit vypsat

aktivniBunka.parentElement

a vyzkoušet totéž.

 
Odpovědět
13.12.2016 19:15
Avatar
Odpovídá na koukalf
Michal Žůrek - misaz:13.12.2016 19:16

když si stáhneš zip, který je pod článkem, tak tam je to kompletní a funguje to.

 
Odpovědět
13.12.2016 19:16
Avatar
koukalf
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
koukalf:13.12.2016 19:23

Je mi líto, ale né nefunguje, teď jsem to opět udělal, stáhl jsem zip, rozbalil. A nic klikám a nic se neděje a píše mi to tu stejnou chybu, nevím jak jinak to dokázat, ale prostě mě to nejede. Ani v Mozille ani v Chromu, mám Linux, ale to nesouvisí to víme oba. V konzoli mi to vypsalo input text jak by mělo, ale javascript mi nejede.

Odpovědět
13.12.2016 19:23
Kvalitní program je jako báseň, pokud do něj nevložíš um, tak se nedá číst.
Avatar
koukalf
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
koukalf:13.12.2016 19:26

Už to mám.....nechápu to, ale mám to - blokoval mě to AdbLock, teď jsem to zakázal a jede mi to. Takže pro příště Adblock zakázat, promiň že jsem tě zbytečně psal, ale tohle člověka nenapadne hned :D

Odpovědět
13.12.2016 19:26
Kvalitní program je jako báseň, pokud do něj nevložíš um, tak se nedá číst.
Avatar
Michal Ingr
Člen
Avatar
Michal Ingr:19.12.2016 13:00

Nebylo by lepší vkládat řádky pomocí

function PridejRadekNahoru() {
    var radek = vytvorRadek();
    tabulka.insertBefore(radek, aktivniRadek());
}
function PridejRadekDolu() {
    var radek = vytvorRadek();
    tabulka.insertBefore(radek, aktivniRadek().nextSibling);
}

kde

function aktivniRadek() {
    return aktivniBunka.parentElement.parentElement;
}

Nemusí se pak proiterovávat "pole" řádků, ani ověřovat, jestli přidáváme za poslední řádek...

 
Odpovědět
19.12.2016 13:00
Avatar
Odpovídá na Michal Ingr
Michal Žůrek - misaz:19.12.2016 17:39

kldině si to tak udělat můžeš, ale odhaduji, že minimálně vložení řádku dolů ti nebude na posledním řádku fungovat, protože aktivniRadek()­.nextSibling bude null.

 
Odpovědět
19.12.2016 17:39
Avatar
Michal Ingr
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Michal Ingr:19.12.2016 17:58

Právě, že to funguje (zkoušeno tedy jen v Chrome, ale zítra zkusím i v jiných prohlížečích). Kdyby to nefungovalo, bylo by to potom možné ověřit podmínkou, pořád by však nebylo potřeba volání funkce na prototypu, které mi přijde docela nečitelné a pro začátečníka docela těžko pochopitelné.
Každopádně děkuji za rychlou reakci...

 
Odpovědět
19.12.2016 17:58
Avatar
Odpovídá na Michal Ingr
Michal Žůrek - misaz:19.12.2016 18:09

pakliže to funguje, tak to funguje jen na základě odsazení HTML a ten nextSibling je buď nějaký TextNode nebo něco podobného. kdybys nahradil nextSibling za myslím nextSiblingElement, tak to (pokud sis do tho ještě jinak nezasahoval) fungovat nebude.

 
Odpovědět
19.12.2016 18:09
Avatar
Michal Ingr
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Michal Ingr:22.12.2016 11:52

Zkusil jsem i nextElementSibling a také to funguje. V navigaci jsem vycházel z tohoto: http://www.w3schools.com/…vigation.asp
Podle mě insertBefore() vloží element na poslední místo, pokud je druhý parametr null (zkoušel jsem v Chrome, IE11, Firefox).

 
Odpovědět
22.12.2016 11:52
Avatar
Pavel Šrytr
Člen
Avatar
Pavel Šrytr:26.2.2017 19:06

Jen tak ohrajově bych se chtěl zeptat, proč jsou funkce PridejRadekNahoru a PridejRadekDolu s velkými písmeny nazačátku ? Omlouvám se pokud jsem to přehlédl.

 
Odpovědět
26.2.2017 19:06
Avatar
Odpovídá na Pavel Šrytr
Michal Žůrek - misaz:26.2.2017 19:18

nevím, si je tam napiš malé abys to měl "dokonalé".

 
Odpovědět
26.2.2017 19:18
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Pavel Šrytr
Člen
Avatar
 
Odpovědět
27.2.2017 19:41
Avatar
Daniel Adámek:17.3.2017 17:06

stahl jsem si zip a nefunguje ani v jednom prohlizeci, v konzoli to pise aktivniBunka undefined...

 
Odpovědět
17.3.2017 17:06
Avatar
Odpovídá na Daniel Adámek
Michal Žůrek - misaz:17.3.2017 17:10

a klikl jsi do nějaké buňky?

 
Odpovědět
17.3.2017 17:10
Avatar
Lubiikpupiik
Člen
Avatar
Lubiikpupiik:5.9.2017 18:19

Může mi někdo poradit, proč mi to nefunguje? V konzoli to píše, že to nemůže přečis firstElementChild (v přesném znění: Uncaught TypeError: Cannot read property 'firstElementChild' of undefined)
Tady je kód:

var tabulka;
var vychoziVelikostX = 5;
var vychozivelikostY = 3;

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

function vytvorVychoziTabulku(){
tabulka = document.createElement("table");
document.body.appendChild(tabulka);
for (var i = 0; i < vychozivelikostY; i++) {
                var tr = document.createElement("tr");
                tabulka.appendChild(tr);
                for (var j = 0; j < vychoziVelikostX; j++) {
                tr.appendChild(vytvorBunku());
                };
        };
};

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

function vytvorOvladaciTlacitka(){
vytvorTlacitkoAVlozHo("Přidej řádek nahoru", document.body).onclick = pridejRadekNahoru();
vytvorTlacitkoAVlozHo("Přidej řádek dolu", document.body).onclick = pridejRadekDolu();
vytvorTlacitkoAVlozHo("Přidej sloupec doleva", document.body);
vytvorTlacitkoAVlozHo("Přidej sloupec doprava", document.body);
vytvorTlacitkoAVlozHo("Smaž rádek", document.body);
vytvorTlacitkoAVlozHo("Smaž sloupec", document.body);

};

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

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

function indexRadkuAktivniBunky() {
var cilHledani = tabulka.childNodes;
var hledanaPrvek = aktivniBunka.parentElement.parentElement;
return Array.prototype.indexOf.call(cilHledani, hledanaPrvek);
};

function indexSloupceAktivniBunky() {
        var bunkyVRadku = aktivniBunka.parentElement.parentElement.childNodes;
        var td = aktivniBunka.parentElement
        return Array.prototype.indexOf.call(bunkyVRadku, td)
};

function pridejRadekNahoru(){
var radek = vytvorRadek();
var indexVybraneho = indexRadkuAktivniBunky();
tabulka.insertBefore(radek, tabulka.childNodes[indexVybraneho]);
};

function pridejRadekDolu(){
var radek = vytvorRadek();
var indexVybraneho = indexRadkuAktivniBunky();
if (tabulka.lastChild = tabulka.childNodes[indexVybraneho]) {
tabulka.appendChild(radek);
} else{
tabulka.insertBefore(radek, tabulka.childNodes[indexVybraneho + 1]);
};
};
window.onload = function(){
vytvorOvladaciTlacitka();
vytvorVychoziTabulku();
};
 
Odpovědět
5.9.2017 18:19
Avatar
Odpovídá na Lubiikpupiik
Michal Žůrek - misaz:5.9.2017 18:36

v článku je napsané, abys použil řádek:

vytvorTlacitkoAVlozHo("Přidat řádek nahoru", document.body).onclick = PridejRadekNahoru;

v kódu však máš.

vytvorTlacitkoAVlozHo("Přidej řádek nahoru", document.body).onclick = pridejRadekNahoru()

máš tam závorky na konci. Když nastavuješ obsluhu události, nesmíš tam psát závorky, protože tím funkci okamžitě zavoláš a to nechceš. Ty ji chceš zavolat až po kliknutí na tlačítko, ne hned.

Editováno 5.9.2017 18:37
 
Odpovědět
5.9.2017 18:36
Avatar
Lubiikpupiik
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Lubiikpupiik:5.9.2017 18:38

Jo paráda. Už chápu. Díky moc.

 
Odpovědět
5.9.2017 18:38
Avatar
frenky.pv
Člen
Avatar
frenky.pv:7.9.2017 14:49

Zkoušel jsem pár vylepšení.

  1. Třeba označit aktivní buňku. Do funkce vytvorBunku() jsem za řádek

tdInput.type = "text"
přidal:
tdInput.onfocus = function () {
if ( aktivniBunka ) aktivniBunka.pa­rentElement.id = '';
aktivniBunka = this
aktivniBunka.pa­rentElement.id = 'sel';
}

A do souboru se styly jsem přidal:
#sel {
border: 2px solid red;
}

Teď krásně vidím jakou buňku mám vybranou.

  1. Taky jsem zjednodušil funkce pro zjištění aktivní buňky

function indexRadkuAktiv­niBunky() {
if ( aktivniBunka ) return aktivniBunka.pa­rentElement.pa­rentElement.ro­wIndex;
return false;
}
function indexSloupceAk­tivniBunky() {
if ( aktivniBunka ) return aktivniBunka.pa­rentElement.ce­llIndex;
return false;
}

  1. Také jsem zjistil, že není třeba u funkcí PridejRadekDolu() dělat podmínky na poslední (koncový prvek). Když se použije tabulka.inser­tBefore(radek, tabulka.childNo­des[indexVybra­neho + 1]), tak to funguje vždy. Možná, že to v nějakém prohlížeči může vyhazovat chybu, pro čtení prvku mimo pole. Mě to fungovalo jak v IE, tak FF.
  1. A pro přidávání sloupců se dá i místo for použít i forEach, jen se to musí udělat přes funkci:

function sloupec( item, index ) {
tabulka.childNo­des[index].in­sertBefore( vytvorBunku(), tabulka.childNo­des[index].chil­dNodes[ indexVybraneho + 1] );
}
tabulka.childNo­des.forEach( sloupec );

 
Odpovědět
7.9.2017 14:49
Avatar
Odpovídá na frenky.pv
Michal Žůrek - misaz:7.9.2017 16:44

vyždycky to jde vylepšit/zjed­nodušit. Cílem článku nebylo udělat tutorial na excel, ale tutorial na obecné metody DOM.

2. ano, to by šlo, ale funguje to jenom v tabulkách. Chtěl jsem ukázat jak se to dělá v obecném elementu.
3. to jsem nevěděl, psal to zde už někde před tebou.
4. V době psaní článku jsi na childNodes volat forEach volat nemohl, protože childNodes není pole, ale instance NodeList. NodeList je takové hloupější pole a jedna z vad NodeListu (obdobné problémy mají/měli objekty HTMLCollection a FileList vrámci FileReader API) je, že neobsahuje běžné metody pole, jako je indexOf, forEach, pop, atd. Absence některých dává smysl, protože implementace operací nad DOM je na straně interpretu JS velmi složitá, nicméně některé se hodí. Oficiálně platný standard metody neobsahuje dodnes, nicméně je součástí návrhu a living standard jej obsahuje. Webvové prohlížeče je ve verzích vydaných cca koncem roku 2016 podporují. Protože forEach jsem i já shledával užitečný (i v dbě, kdy na childNodes zavolat nešel), přidával jsem si do kódu vlastní easy peasy polyfil toArray() na Object, který mi převedl objekt (tzn. NodeList, HTMLCollection a FileList) na klasické pole, samozřejmě za cenu, že tam stejně nebude fungovat třeba metoda splice.

 
Odpovědět
7.9.2017 16:44
Avatar
Fero M
Člen
Avatar
Fero M:20.2.2018 16:15

Proč to prosím nefunguje??

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

var aktivniBunka;

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

}

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

function VytvorTlacitko­AVlozHo(popisek, rodic) {
var a = document.crea­teElement("but­ton");
a.textContent = popisek;
rodic.appendChil­d(a);
return a;
}
function VytvorOvladaci­Tlacitka () {
VytvorTlacitko­AVlozHo("přidat řádek dolů", document.body);
VytvorTlacitko­AVlozHo("přidat řádek nahoru", document.body);
VytvorTlacitko­AVlozHo("přidat sloupec v levo", document.body);
VytvorTlacitko­AVlozHo("přidat sloupec v pravo", document.body);
VytvorTlacitko­AVlozHo("odstra­nit řádek", document.body);
VytvorTlacitko­AVlozHo("odstra­nit sloupec", document.body);
}

function vytvorRadek() {
let novyRadek = document.crea­teElement("tr");

for (let i = 0; i < tabulka.firstE­lementChild.chil­dNodes.length; i++) {
novyRadek.appen­dChild(vytvor­Bunku());
}
return novyRadek;
}

function indexRadkuAktiv­niBunky() {
let cilHledani = tabulka.childNodes;
let hledanyPrvek = aktivniBunka.pa­rentElement.pa­rentElement;
return Array.prototy­pe.indexOf.ca­ll(cilHledani, hledanyPrvek);
}
function indexSloupceAk­tivniBunky() {
let bunkyVRadku = aktivniBunka.pa­rentElement.pa­rentElement.chil­dNodes;
let td = aktivniBunka.pa­rentElement;
return Array.prototy­pe.indexOf.ca­ll(bunkyVRadku, td);
}
function pridejRadekNahoru() {
let radek = vytvorRadek();
let indexVybraneho = indexRadkuAktiv­niBunky();
tabulka.inser­tBefore(radek, tabulka.childNo­des[indexVybra­neho]);
}
{
vytvorTlacitko­AVlozHo("Přidat řádek nahoru", document.body)­.onclick = pridejRadekNahoru;
}
function pridejRadekDolu() {
let radek = vytvorRadek();
let indexVybraneho = indexRadkuAktiv­niBunky();
if (tabulka.lastChild == tabulka.childNo­des[indexVybra­neho]) {
tabulka.appen­dChild(radek);
}
else {
tabulka.inser­tBefore(radek, tabulka.childNo­des[indexVybra­neho + 1]);
}
}
{
vytvorTlacitko­AVlozHo("Přidat řádek dolů", document.body)­.onclick = pridejRadekDolu;
}
window.onload = function(){
vytvorOvladaci­Tlacitka();
vytvorVychozi­Tabulku();

}

 
Odpovědět
20.2.2018 16:15
Avatar
Odpovídá na Fero M
Michal Žůrek - misaz:20.2.2018 16:46

zmáčkni F12 a podívej se co to do konzole vypsalo za chybu.

 
Odpovědět
20.2.2018 16:46
Avatar
Fero M
Člen
Avatar
 
Odpovědět
20.2.2018 19:57
Avatar
Fero M
Člen
Avatar
Fero M:20.2.2018 20:16

A mohu se prosím zeptat v jakém programu to programujete?

 
Odpovědět
20.2.2018 20:16
Avatar
Odpovídá na Fero M
Michal Žůrek - misaz:20.2.2018 20:40

Já ve Visual Studiu 2017.

 
Odpovědět
20.2.2018 20:40
Avatar
Fero M
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Fero M:20.2.2018 20:58

No já to mám v Pspadu a přes F10 mi to píše úplné blbosti (něco jako připište středník mezi (např:. let ;cilHledani)) Nevím vůbec co mám dělat. :(

 
Odpovědět
20.2.2018 20:58
Avatar
Odpovídá na Fero M
Michal Žůrek - misaz:20.2.2018 21:07

Nepoužívej integrovaný prohlížeč v PSPadu. ten je tak minimálně 15 let neaktualizovaný.

 
Odpovědět
20.2.2018 21:07
Avatar
Fero M
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Fero M:20.2.2018 21:10

a mohu třeba netbeans? a Xampp

 
Odpovědět
20.2.2018 21:10
Avatar
Fero M
Člen
Avatar
Fero M:23.2.2018 13:17

Dobryr den mohli byste mi prosím napsat jak vypadá výsledný kód těchto tabulek?

 
Odpovědět
23.2.2018 13:17
Avatar
Odpovídá na Fero M
Michal Žůrek - misaz:23.2.2018 13:50

Pod článkem si ho můžete stáhnout.

 
Odpovědět
23.2.2018 13:50
Avatar
Fero M
Člen
Avatar
Fero M:23.2.2018 19:54

Tož, díky vám moc - chyba nalezena!

 
Odpovědět
23.2.2018 19:54
Avatar
Tomáš Chocenský:11.6.2018 14:56

ahoj
můžete mi poradit jaký je rozdil mezi timto ...

function pridejSloupecDoleva() {
        let indexVybraneho = indexSloupceAktivniBunky();
        for (let i = 0; i < tabulka.childNodes.length; i++) {
                tabulka.childNodes[i].insertBefore(vytvorBunku(), tabulka.childNodes[i].childNodes[indexVybraneho]);
        }
}

a timto kodem ...

function pridejSloupecDoleva() {
    let bunka = vytvorBunku();
    let indexVybraneho = indexSloupceAktivniBunky();
    for (let i = 0; i < tabulka.childNodes.length; i++) {
        //pred vybranou bunku v kazdem z radku
        tabulka.childNodes[i].insertBefore(bunka, tabulka.childNodes[i].childNodes[indexVybraneho]);
    }
}

?
Jen jsem uložil funkci do proměnné (jak tomu bylo i v předchozích funkcích) a myslím že by to mělo fungovat pořád stejně.
Ale z mě nepochopitelných důvodů mi to začne přidávat ty sloupce(buňky) jen v posledním řádku.
Proč?

 
Odpovědět
11.6.2018 14:56
Avatar
Odpovídá na Tomáš Chocenský
Roman Havelka:20.1.2019 19:07

Vloz si "let bunka" do cyklu.

/**
* Prida sloupec vlevo od oznacene bunky
*/
function pridejSloupec­Doleva() {

let indexVybraneho = indexSloupceAk­tivniBunky();
for (let i = 0; i < tabulka.childNo­des.length; i++) {
let bunka = vytvorBunku();
tabulka.childNo­des[i].insertBe­fore(bunka, tabulka.childNo­des[i].childNo­des[indexVybra­neho]);
}
}

 
Odpovědět
20.1.2019 19:07
Avatar
Markmann
Člen
Avatar
Markmann:27.6.2019 13:22

Zdravím! Pomůžete, prosím?
Zatím jsem pracoval bez pomocí IDE, který by mi pomáhal hledat chyby. Teď jsem zkusil Visual Studio Code, ale ten říká, že nenašel žádnou chybu. Problém nastal, když jsem za:
vytvorTlacitko­AVlozHo("přidat řádek nahoru",documen­t.body) napsal .onclick=pridej­RadekNahoru;
Vypsaly se pouze první 2 buňky a tabulky zmizela.
Hledám, hledám, ale nevím si rady.
Rád bych poslal texťáky, ale jde jen jeden obrázek, zbytečně bych tady zabíral místo, věřte že jsem jen přidal .onclick=pridej­RadekNahoru;(nor­málně se nevypsalo nic, když tam byla chyba, ale teď se vypsali dva buttony)

Editováno 27.6.2019 13:23
 
Odpovědět
27.6.2019 13:22
Avatar
Markmann
Člen
Avatar
Odpovídá na Markmann
Markmann:27.6.2019 14:08

Chybu jsem našel, chyběla mi metoda vytvorRadek xD

 
Odpovědět
27.6.2019 14:08
Avatar
Markmann
Člen
Avatar
Odpovídá na Markmann
Markmann:27.6.2019 14:41

Tak ne, problém přetrvává. Teď jsem ale spustil nástroj pro vývojáře v chromu a aspoň to hází nějaké errory. Přikládám soubor, co mi to píše. Jsem zmaten. Proč navíc za pridejRadekNahoru nejsou závorky? Není to funkce, která není v proměnné?

Editováno 27.6.2019 14:44
 
Odpovědět
27.6.2019 14:41
Avatar
Markmann
Člen
Avatar
Markmann:27.6.2019 14:48

A proč, když spustím vzorový a kliknu na tlačítka přidej řádku, tak se nic nestane(nevidím rozšíření té tabulky)? V nástrojích pro vývojáře to hlásí chybu viz příloha.

 
Odpovědět
27.6.2019 14:48
Avatar
Jan Tesař
Člen
Avatar
Jan Tesař:29.7.2019 17:16

Ahoj, proč ve funkci vytvorTlacitko­AVlozHo(popisek, rodic) při jejím volání do "rodic" nelze napsat nic jiného než document.body, např. document.p nebo document.body.p (samozřejmě daný tag v indexu vytvořím), nebo, pokud to nelze proč daný parametr u funkce vůbec používáme a nenapíšem document.body přímo do funkce a v parametru necháme jen popisek?

Děkuji

 
Odpovědět
29.7.2019 17:16
Avatar
Jozef Lysík
Člen
Avatar
Jozef Lysík:23.10.2019 16:05

Čaute.
Príkazy tabulka.lastChild a tabulka.lastE­lementChild vracajú to isté? Napríklad v podmienkach kde sa testuje posledný riadok alebo stĺpec fungujú obidva zápisy.
Ďakujem

 
Odpovědět
23.10.2019 16:05
Avatar
Odpovídá na Jozef Lysík
Jakub Podskalský:23.10.2019 17:29

lastElementChild vrátí poslední element (elementem se myslí tag). lastElement vrátí poslední node, tím může být třeba text nebo komentář.

<div>
    <button>tlačítko</button>
    <p>paragraph</p>
    Já jsem text node
</div>

lastChild by vrátil ten poslední text node, lastElementChild p element.

 
Odpovědět
23.10.2019 17:29
Avatar
Jan Šándor
Člen
Avatar
Odpovídá na Tomáš Chocenský
Jan Šándor:27.1.2020 20:21

Ahoj, asi to už je jedno, ale je to tím, že se ti do proměnné bunka uloží výsledek aplikace funkce vytvorBunku(), která vrátí jednu jedinou novou konkrétní buňku a ty pak vlastně v cyklu všude přidáváš tu jednu konkrétní buňku do každého řádku.

Tedy snažíš se o to, aby jediná buňka byla vložena do více řádků současně. Proto ti to vyřeší přesun let bunka = vytvorBunku(); dovnitř do foru, protože tak v každé iteraci vytvoříš novou instanci buňky (zcela novou, další buňku), která se přidá. Každý řádek tedy dostane svoji novou buňku.

Tohle je opravdový důvod, proč ti to nešlo (a mě taky, když jsem to zkoušel dělat více způsoby/zápisy kódu a toto byl jeden z nich). To s tím přesunem do foru je sice řešení, ale není tam to vysvětlení proč se to chovalo jinak, než jsi čekal.

Pokud bys do bunka uložil funkci (takto: let bunka = vytvorBunku; tedy bez zavorek) a nikoliv výsledek její aplikace (kterou jsi inicioval právě těmi závorkami) a pak místo bunka použil bunka(), vše by fungovalo, jak jsi očekával. To ale nemá myslím moc smysl, když můžeš na místě aplikovat samu funkci vytvorBunku().

Odpovědět
27.1.2020 20:21
Jednoho dne přidám, až objevím to pravé.
Avatar
Tomas Remek
Člen
Avatar
Odpovídá na Markmann
Tomas Remek:27.10.2020 20:22

Ahoj,
jdu asi s křížkem po funuse, ale třeba se to bude hodit někomu dalšímu... :)

1)
Tenhle warning ti to vyhodí, když neklikneš na žádný input = není definována aktivniBunka.

2)
Tvůj předchozí problém jsem měl ve stejné fázi jako ty - vykreslily se mi pouze dva buttony a v konzoli error. Nakonec jsem našel svou chybu v kódu, kdy jsem zapomněl na závorky uvnitř funkce pridejRadekNahoru.

Můj postup odladění:
1 - stáhni si vzorový js soubor a zkus spustit s ním. Pokud funguje, víš, že je chyba někde v tvém souboru a ne nikde jinde.
2- v nějakém IDE (v mém případě netbeans) hledej rozdíly, mezi tvým souborem a řešeným vzorem. Určitě chybku najdeš :)

3)
A co se týká tvé poslední otázky: Proč navíc za pridejRadekNahoru nejsou závorky? Není to funkce, která není v proměnné?
Nejsou tu protože jde o ukládání funkce. Máš tam vlastně zjednodušeně button.onclick = pridejRadekNahoru V lekci 7 je o tom odstavec "Uložení funkce do proměnné".

 
Odpovědět
27.10.2020 20:22
Avatar
Martin Přikryl:20.11.2020 21:18

pridejSloupec­Doprava() kontroluje, zda je aktivni soupec posledni pro kazdy radek. Efektivnejsi by bylo dat podminu pred for cyklus. A pouzit tak cykly dva.

 
Odpovědět
20.11.2020 21:18
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 62 zpráv z 62.