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

Tomáš Stoklasa

Člen

Tomáš Stoklasa :19.10.2024 20:25

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

Odpovedať

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

Odpovedať

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

Odpovedať

29.12.2024 12:16

Jiří Stehlík

Člen

Jiří Stehlík:2. januára 17:59

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

Odpovedať

2. januára 17:59

Filip Říha

Člen

Filip Říha:26. januára 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

Odpovedať

26. januára 15:49

Jan Koubek

Člen

Jan Koubek :1. februára 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.

Odpovedať

1. februára 22:16

Yveta Kršková

Člen

Yveta Kršková:11. februára 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...

Odpovedať

11. februára 15:27

:D :D :D

Jan Sobotka

Člen

Jan Sobotka:14. februára 13:01

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

Odpovedať

14. februára 13:01

Daniel Schneidr

Člen

Daniel Schneidr:28. februára 22:09

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

Odpovedať

28. februára 22:09

Daniel Polák

Člen

Daniel Polák:10. marca 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
...

Odpovedať

10. marca 0:34

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