Diskuze – Lekce 21 - Dokončení editoru tabulek v JavaScriptu

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře

Pavel Bališ

Člen

Pavel Bališ:13.9.2023 20:51

" Po tomto příkladu byste již měli ovládat DOM v JavaScriptu."
tak tahle věta mě dost rozesmála.
Slepě jsem opisoval a snažil se pochopit, tabulka sice funguje jak má, ale kdybych měl všechno napsat znovu a sám, tak zjistím, že vůbec nic nevím

Odpovědět

13.9.2023 20:51

Marek Jiříček

Člen

Marek Jiříček:16.9.2023 21:50

Nejvtipnější na tom je, že to jde udělat jednodušeji než to je v článku:
Ta podmínka jestli jsme nevylezli z indexu NodeListu (pseudopole) je zbytečná. Metoda insertBefore() udělá přesně co potřebujeme i v tomto případě, automaticky se v tomto případě zachová stejně jako appendChild(). Protože NodeList nám pro neplatný index dá undefined/null a insertBefore v tomto případě dá append na konec listu.

https://stackoverflow.com/…s-last-child

Odpovědět

16.9.2023 21:50

Milena Heřmanová

Člen

Milena Heřmanová:18.9.2023 19:21

Tak jsem se tím poctivě prokousala a tabulka funguje jen do bodu zobrazení základní kostry a zobrazení tlačítek, funkčnost ale nefunguje. Zkontrolovala jsem i se staženým zadáním a nenašla jsem rozdíl. Přikládám svůj kód, nevidíte v něm někdo někde chybu?

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

let aktivniBunka;


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

function vytvorOvladaciTlacitka(){
    vytvorTlacitkoAVlozHo("Přidat řádek dolů", document.body).onclick = pridejRadekDolu;
    vytvorTlacitkoAVlozHo("Přidat řádek nahoru", document.body).onclick = pridejRadekNahoru;
    vytvorTlacitkoAVlozHo("Přidat sloupec vlevo", document.body).onclick = pridejSloupecDoleva;
    vytvorTlacitkoAVlozHo("Přidat sloupec vpravo", document.body).onclick = pridejSloupecDoprava;
    vytvorTlacitkoAVlozHo("Odstranit řádek", document.body).onclick = smazRadek;
    vytvorTlacitkoAVlozHo("Odstranit sloupec", document.body).onclick = smazSloupec;
}

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;

}

function vytvorRadek(){
    let novyRadek = document.createElement("tr");
    let prvniRadek = tabulka.firstElementChild;
    let bunkyPrvnihoRadku = prvniRadek.childNodes;
    let pocetBunekVPrvnimRadku = bunkyPrvnihoRadku.length;

    for (let i = 0; i < pocetBunekVPrvnimRadku; i++){
        novyRadek.appendChild(vytvorBunku());
    }
    return novyRadek
}

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


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

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


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


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]);
    }
}
function pridejSloupecDoleva() {
        let indexVybraneho = indexSloupceAktivniBunky();
        for (let i = 0; i < tabulka.childNodes.length; i++) {
                tabulka.childNodes[i].insertBefore(vytvorBunku(), tabulka.childNodes[i].childNodes[indexVybraneho]);
        }
}
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]);
                }
        }
}
function smazRadek() {
        let indexVybraneho = indexRadkuAktivniBunky();
        tabulka.removeChild(tabulka.childNodes[indexVybraneho]);
}

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


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


}

Odpovědět

18.9.2023 19:21

Barbora König

Člen

Barbora König:22.9.2023 11:24

Kód mi nefunguje, lekce mi přišla trochu chaotická, dělá mi problém vše si spojit.

Odpovědět

22.9.2023 11:24

Milena Heřmanová

Člen

Milena Heřmanová:22.9.2023 13:44

Tak už mi kód funguje, měla jsem chybu ve slově parentElement (vypadlo mi jedno písmenko :-( )

Odpovědět

22.9.2023 13:44

Natálie Růžičková

Tvůrce

Natálie Růžičková:27.9.2023 9:21

Ahoj Báro, díky za tvůj komentář, pracujeme na vylepšení a aktulizaci lekce, kdybys k tomu měla ještě nějaké konkrétní podněty, co by ti pomohlo, sem s tím :-)

Odpovědět

27.9.2023 9:21

Natálie Růžičková

Tvůrce

Natálie Růžičková:27.9.2023 9:23

Ahoj Marku, díky za tvůj komentář, mrkneme se na to 👍

Odpovědět

27.9.2023 9:23

Natálie Růžičková

Tvůrce

Natálie Růžičková:27.9.2023 9:25

Ahoj Viliame, některé lekce jsou náročnější, pevně však doufám, že tě neodradí a zvládneš to. Videa k dispozici nejsou, ale když bys nám napsal, co konkrétně by ti v lekci pomohlo, rádi to při aktualizaci zahrneme 👍

Editováno 27.9.2023 9:27

Odpovědět

27.9.2023 9:25

Natálie Růžičková

Tvůrce

Natálie Růžičková:27.9.2023 9:45

Ahoj Jaroslave, díky za tvé postřehy, je to opraveno a snad i srozumitelněji formulováno. Pravda, nebylo to nejšťastnější, tak snad je to nyní už OK :-)

Odpovědět

27.9.2023 9:45

Jaroslav Drobek

Člen

Jaroslav Drobek:27.9.2023 11:28

Milá Natálko,
děkuji za upozornění. Bohudík již nestíhám trávit čas nad revidovaným textem, anžto jsem krátce po absolvování zdejšího kurzu sehnal vysněnou práci v IT, pročež nyní prudím jinde :oo

Odpovědět

27.9.2023 11:28

Naučíme tě pracovat na home-office.

Zjistit více...

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 10 zpráv z 158.

Nejčastěji vyhledáváné

Diskuze – Lekce 21 - Dokončení editoru tabulek v JavaScriptu