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

Tomáš Stoklasa

Člen

Tomáš Stoklasa :19.10.2024 20:25

Moc složité na pochopení............................

Odpovědět

19.10.2024 20:25

Yaroslav Saprykin

Člen

Yaroslav Saprykin:16.12.2024 15:54

Dle mého názoru je tady překlep názvu v tutorialu tam kde se nastavuje obsluha kliknutí tlačítkům pro funkci *vytvorOvladaciTlacitka() *

např. řádek

vytvorTlacitkoAVlozHo("Přidat sloupec vlevo").onclick = pridejSloupecDoleva;

čekal bych spíš (finální zip potvrzuje tuto myšlenku)

vytvorTlacitko("Přidat sloupec vlevo").onclick = pridejSloupecDoleva;

a je tomu tak u všech 6 tlačítek.

Zdroj: https://www.itnetwork.cz/…ek-dokonceni

Odpovědět

16.12.2024 15:54

Adam Černý

Člen

Adam Černý:29.12.2024 12:16

Pro zájemce funkční a upravený kód k vyzkoušení a dalším experimentům:

přidal jsem kontroly na existenci aktivní buňky před každou operací
přidal jsem automatické přesouvání fokusu po každé operaci:
při přidání řádku/sloupce se fokus přesune na nově vytvořenou buňku
při smazání řádku/sloupce se fokus přesune na nejbližší dostupnou buňku

let tabulka;
let sloupcu = 5;
let radku = 3;
let aktivniBunka;

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

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

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

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 vytvorTlacitko(popisek, onClick) {
    let btn = document.createElement("button");
    btn.textContent = popisek;
    if (onClick) {
        btn.onclick = onClick;
    }
    document.body.appendChild(btn);
    return btn;
}

function vytvorOvladaciTlacitka() {
    vytvorTlacitko("Přidat řádek dolů", pridejRadekDolu);
    vytvorTlacitko("Přidat řádek nahoru", pridejRadekNahoru);
    vytvorTlacitko("Přidat sloupec vlevo", pridejSloupecDoleva);
    vytvorTlacitko("Přidat sloupec vpravo", pridejSloupecDoprava);
    vytvorTlacitko("Odstranit řádek", smazRadek);
    vytvorTlacitko("Odstranit sloupec", smazSloupec);
}

function vytvorRadek() {
    let novyRadek = document.createElement("tr");
    let pocetBunekVPrvnimRadku = tabulka.firstElementChild.querySelectorAll("td").length;

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

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

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

function pridejRadekNahoru() {
    if (!aktivniBunka) {
        alert("Nejdřív vyberte buňku kliknutím do tabulky");
        return;
    }
    let novyRadek = vytvorRadek();
    let indexVybraneho = indexRadkuAktivniBunky();
    tabulka.insertBefore(novyRadek, tabulka.childNodes[indexVybraneho]);
    // Zachováme aktivní buňku na stejné pozici v novém řádku
    let bunkyNovehoRadku = novyRadek.getElementsByTagName('input');
    bunkyNovehoRadku[indexSloupceAktivniBunky()].focus();
}

function pridejRadekDolu() {
    if (!aktivniBunka) {
        alert("Nejdřív vyberte buňku kliknutím do tabulky");
        return;
    }
    let novyRadek = vytvorRadek();
    let indexVybraneho = indexRadkuAktivniBunky();
    if (tabulka.lastChild == tabulka.childNodes[indexVybraneho]) {
        tabulka.appendChild(novyRadek);
    } else {
        tabulka.insertBefore(novyRadek, tabulka.childNodes[indexVybraneho + 1]);
    }
    // Zachováme aktivní buňku na stejné pozici v novém řádku
    let bunkyNovehoRadku = novyRadek.getElementsByTagName('input');
    bunkyNovehoRadku[indexSloupceAktivniBunky()].focus();
}

function pridejSloupecDoleva() {
    if (!aktivniBunka) {
        alert("Nejdřív vyberte buňku kliknutím do tabulky");
        return;
    }
    let indexVybraneho = indexSloupceAktivniBunky();
    let indexRadku = indexRadkuAktivniBunky();

    for (let i = 0; i < tabulka.childNodes.length; i++) {
        let novaBunka = vytvorBunku();
        tabulka.childNodes[i].insertBefore(novaBunka, tabulka.childNodes[i].childNodes[indexVybraneho]);
        // Aktivujeme buňku v původním řádku
        if (i === indexRadku) {
            novaBunka.querySelector('input').focus();
        }
    }
}

function pridejSloupecDoprava() {
    if (!aktivniBunka) {
        alert("Nejdřív vyberte buňku kliknutím do tabulky");
        return;
    }
    let indexVybraneho = indexSloupceAktivniBunky();
    let indexRadku = indexRadkuAktivniBunky();

    for (let i = 0; i < tabulka.childNodes.length; i++) {
        let novaBunka = vytvorBunku();
        if (tabulka.childNodes[i].childNodes[indexVybraneho] == tabulka.childNodes[i].lastElementChild) {
            tabulka.childNodes[i].appendChild(novaBunka);
        } else {
            tabulka.childNodes[i].insertBefore(novaBunka, tabulka.childNodes[i].childNodes[indexVybraneho + 1]);
        }
        // Aktivujeme buňku v původním řádku
        if (i === indexRadku) {
            novaBunka.querySelector('input').focus();
        }
    }
}

function smazRadek() {
    if (!aktivniBunka) {
        alert("Nejdřív vyberte buňku kliknutím do tabulky");
        return;
    }
    let indexVybraneho = indexRadkuAktivniBunky();
    if (tabulka.childNodes.length > 1) {
        tabulka.removeChild(tabulka.childNodes[indexVybraneho]);
        // Aktivujeme buňku v sousedním řádku
        let novyIndex = indexVybraneho;
        if (novyIndex >= tabulka.childNodes.length) {
            novyIndex = tabulka.childNodes.length - 1;
        }
        let bunky = tabulka.childNodes[novyIndex].getElementsByTagName('input');
        let sloupecIndex = Math.min(indexSloupceAktivniBunky(), bunky.length - 1);
        bunky[sloupecIndex].focus();
    }
}

function smazSloupec() {
    if (!aktivniBunka) {
        alert("Nejdřív vyberte buňku kliknutím do tabulky");
        return;
    }
    let indexVybraneho = indexSloupceAktivniBunky();
    if (tabulka.childNodes[0].childNodes.length > 1) {
        for (let i = 0; i < tabulka.childNodes.length; i++) {
            tabulka.childNodes[i].removeChild(tabulka.childNodes[i].childNodes[indexVybraneho]);
        }
        // Aktivujeme sousední buňku
        let radek = tabulka.childNodes[indexRadkuAktivniBunky()];
        let novyIndex = indexVybraneho;
        if (novyIndex >= radek.childNodes.length) {
            novyIndex = radek.childNodes.length - 1;
        }
        radek.childNodes[novyIndex].querySelector('input').focus();
    }
}

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

Odpovědět

29.12.2024 12:16

Jiří Stehlík

Člen

Jiří Stehlík:2. ledna 17:59

Trochu matoucí volání funkce "vytvorTlacitko". V textu je použité "vytvorTlacitkoAVlozHo"

Odpovědět

2. ledna 17:59

Filip Říha

Člen

Filip Říha:26. ledna 15:49

trochu me mrzi chyby v clanku zvlast co se kodu tyce, nesouhlasim s ostatnimi komentari ze by to melo jit pomaleji protoze tim tempem by jsme se nikam nedostali, ale rekl bych ze by byla vhodna revize, preklep v parent element a nasledne v nazvu vyuzitych funkci vytvorTlacitko misto vytvorTlacitkoAVlozHo akorat cloveka zmate clanek sem musel precist na 3x kdyz sem v pulce zjistil ze mi to vlastne nefunguje tak jak ma.
Mozna bych pro lepsi orientaci zaku rozhodil tento clanek do dvou

Odpovědět

-1

26. ledna 15:49

Jan Koubek

Člen

Jan Koubek :1. února 22:16

V lekcích s tabulkou jsem nenašel vysvětlení, kdy a proč se v praxi na tabulku použije JavaScript. Zeptal jsem se umělé inteligence a dostal tuto odpověď:
Pro vytvoření editovatelné tabulky na webové stránce je nejvhodnější kombinace HTML pro strukturu, JavaScript pro interaktivitu a případně backendový jazyk pro ukládání a zpracování dat.
Nevím, jestli je to správně, ale dává mi to smysl.

Odpovědět

1. února 22:16

Yveta Kršková

Člen

Yveta Kršková:11. února 15:27

Páni, tak to je tedy na mě moc. Když dám závorky za funkce za rovnítkem u .onclick, je nefunkční celý html soubor, když je nedám za deklaraci indexVybraného (funkce k získání indexu sloupce nebo řádku aktivní buňky), nic se neděje, ale když je nedám za deklaraci 'let novyRadek = vytvorRadek();' tak přidání nového řádku nefunguje.
A mimochodem, nevím, jak posunout v komentářích smajlíky, abych mohla vybrat toho s nejpřekříženějšíma očima, hmmmm...

Odpovědět

11. února 15:27

:D :D :D

Jan Sobotka

Člen

Jan Sobotka:14. února 13:01

vytvorTlacitkoAVlozHo("Přidat sloupec vlevo").onclick = pridejSloupecDoleva má jiný název než původní vytvorTlacitko("Přidat sloupec vlevo");

Odpovědět

14. února 13:01

Daniel Schneidr

Člen

Daniel Schneidr:28. února 22:09

Hromada textu, málo psaní kódu, je to škoda. První půlka kurzu bezvadná.

Odpovědět

28. února 22:09

Daniel Polák

Člen

Daniel Polák:10. března 0:34

Je tam chyba vo funkcii addRow. Namiesto activeCellColumnIndex by tam malo byť activeCellRowIndex.

function addRow(top) {
    let newRow = createRow();
    // wrong line: let selectedIndex = activeCellColumnIndex();
    let selectedIndex = activeCellRowIndex(); // correct line
...

Odpovědět

10. března 0:34

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 154.

Nejčastěji vyhledáváné

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