Diskusia – 20. diel - Dokončenie editora tabuliek v JavaScripte

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

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

Odpovedať

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

Odpovedať

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


}

Odpovedať

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.

Odpovedať

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 :-( )

Odpovedať

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 :-)

Odpovedať

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 👍

Odpovedať

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 👍

Editované 27.9.2023 9:27

Odpovedať

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 :-)

Odpovedať

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

Odpovedať

27.9.2023 11:28

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 152.

Najčastejšie vyhľadávané

Diskusia – 20. diel - Dokončenie editora tabuliek v JavaScripte