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

Michal Žůrek - misaz

Tvůrce

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

Pavel Šrytr

Člen

Pavel Šrytr:27.2.2017 19:41

Děkuji

Odpovědět

27.2.2017 19:41

Daniel Adámek

Člen

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

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:17.3.2017 17:10

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

Odpovědět

17.3.2017 17:10

Lubiikpupiik

Člen

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

Michal Žůrek - misaz

Tvůrce

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

Lubiikpupiik

Člen

Lubiikpupiik:5.9.2017 18:38

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

Odpovědět

5.9.2017 18:38

frenky.pv

Člen

frenky.pv:7.9.2017 14:49

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

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

tdInput.type = "text"
přidal:
tdInput.onfocus = function () {
if ( aktivniBunka ) aktivniBunka.parentElement.id = '';
aktivniBunka = this
aktivniBunka.parentElement.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.

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

function indexRadkuAktivniBunky() {
if ( aktivniBunka ) return aktivniBunka.parentElement.parentElement.rowIndex;
return false;
}
function indexSloupceAktivniBunky() {
if ( aktivniBunka ) return aktivniBunka.parentElement.cellIndex;
return false;
}

Také jsem zjistil, že není třeba u funkcí PridejRadekDolu() dělat podmínky na poslední (koncový prvek). Když se použije tabulka.insertBefore(radek, tabulka.childNodes[indexVybraneho + 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.

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.childNodes[index].insertBefore( vytvorBunku(), tabulka.childNodes[index].childNodes[ indexVybraneho + 1] );
}
tabulka.childNodes.forEach( sloupec );

Odpovědět

7.9.2017 14:49

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:7.9.2017 16:44

vyždycky to jde vylepšit/zjednoduš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

Fero M

Člen

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 () {
VytvorOvladaciTlacitka ();
vytvorVychoziTabulku();

}

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 y = 0; y < vychoziVelikostY; y++) {
var tr = document.createElement("tr");
tabulka.appendChild(tr);

for (var x = 0; x < vychoziVelikostX; x++) {
tr.appendChild(vytvorBunku());
}
}
}

function VytvorTlacitkoAVlozHo(popisek, rodic) {
var a = document.createElement("button");
a.textContent = popisek;
rodic.appendChild(a);
return a;
}
function VytvorOvladaciTlacitka () {
VytvorTlacitkoAVlozHo("přidat řádek dolů", document.body);
VytvorTlacitkoAVlozHo("přidat řádek nahoru", document.body);
VytvorTlacitkoAVlozHo("přidat sloupec v levo", document.body);
VytvorTlacitkoAVlozHo("přidat sloupec v pravo", document.body);
VytvorTlacitkoAVlozHo("odstranit řádek", document.body);
VytvorTlacitkoAVlozHo("odstranit sloupec", document.body);
}

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

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

}

Odpovědět

20.2.2018 16:15

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