NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

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
Avatar
Michal
Člen
Avatar
Michal:18.4.2016 9:43

Po kliknutí na button "Pridaj riadok hore" mi vypise chybu :
Uncaught TypeError: Array.prototy­pe.indexOf called on null or undefined
Prikladám aj zdroják.

 
Odpovědět
18.4.2016 9:43
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Odpovídá na Michal
Libor Šimo (libcosenior):18.4.2016 15:05

Toto som si upravil podľa stiahnutého vzoru:

function vytvorRiadok() {
         var novyRiadok = document.createElement("tr");
         var prvyRiadok = tabulka.firstElementChild;
             var bunkyPrvehoRiadku = prvyRiadok.childNodes;
             var pocetBuniekVPrvomRiadku = bunkyPrvehoRiadku.length;

         for (var i = 0; i < pocetBuniekVPrvomRiadku; i++) {
             novyRiadok.appendChild(vytvorBunku());
         }

         return novyRiadok;
}

V článku je to inakšie a aj ty to máš inakšie.
Možno je chyba tam.

Odpovědět
18.4.2016 15:05
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Libor Šimo (libcosenior):18.4.2016 15:35

Už mi to funguje. :-)

Odpovědět
18.4.2016 15:35
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Nezmar Hydra
Člen
Avatar
Nezmar Hydra:6.10.2016 2:50

Jak můžu v javě sloučit buňky tabulky?
Jejich oindexování jsem vyřešil taklenc:

var td = document.crea­teElement("td")
var tdInput = document.crea­teElement("tex­t")
var oindexuj = document.crea­teElement("ID")
x = x+1;
oindexuj.id=("tab"+x­);
tdInput.textContent = x;
td.appendChil­d(oindexuj).ap­pendChild(tdIn­put);
return td;

ale jak mu říct, aby sloučil buňky s vybranými indexy na to jsem nepřišel.
Díky za radu.

 
Odpovědět
6.10.2016 2:50
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Nezmar Hydra
Michal Žůrek - misaz:8.10.2016 0:12

hmmm, takhle to nepůjde chtělo by si to prustudovat základy HTML. Tvůj kód vytváří vpodstatě následující HTML.

<td>
    <ID id="tabX">
        <text>
        X
        </text>
    </ID>
</td>

a takhle tabulky v HTML nefungují.

 
Odpovědět
8.10.2016 0:12
Avatar
Nezmar Hydra
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Nezmar Hydra:8.10.2016 1:28

Ne to mi funguje fajn. mam oIDéčkovanou každou buňku a mužu si do ní přidávat co chci a kam chci. jen ten kód jsem nedal celej.
je to taklenc
function vytvorVychozi­Tabulku(vycho­ziVelikostX,vycho­ziVelikostY,I­DeckoKam,IDec­koPridel){
var tabulka;
var NUMindex = 0;
tabulka = document.crea­teElement("ta­ble");
document.getE­lementById(IDec­koKam).appendChil­d(tabulka);
for (var y = 0; y < vychoziVelikostY; y++)
{

var tr = document.crea­teElement("tr");
tabulka.appen­dChild(tr);
for (var x = 0; x < vychoziVelikostX; x++) {
NUMindex = NUMindex+1;
tr.appendChil­d(vytvorBunku(I­DeckoPridel,NU­Mindex));
}
}
}
function vytvorBunku(Tex­tIndes,index) {
var td = document.crea­teElement("td");
var tdInput = document.crea­teElement("tex­t");
var oindexuj = document.crea­teElement("ID");

oindexuj.id=(Tex­tIndes+index);
tdInput.textContent = (TextIndes+index);
td.appendChil­d(oindexuj).ap­pendChild(tdIn­put);
return td;
}

 
Odpovědět
8.10.2016 1:28
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Nezmar Hydra
Michal Žůrek - misaz:8.10.2016 11:37

Buňky se dají spojit tak, že první buňce dáš attribute colspan nebo rowspan s hodnotou kolik sloupců/řádků to má sloučit.

 
Odpovědět
8.10.2016 11:37
Avatar
Jan Zamecnik
Člen
Avatar
Jan Zamecnik:26.10.2016 10:15

Funkce pro zjištění aktivní buňky jsem upravil následovně

function indexRadkuAktivniBunky() {
    if (aktivniBunka) {
        var cilHledani = tabulka.childNodes;
        var hledanyPrvek = aktivniBunka.parentElement.parentElement;
        return Array.prototype.indexOf.call(cilHledani, hledanyPrvek);
    } else
        return 0;
}

function indexSloupceAktivniBunky() {
    if (aktivniBunka) {
        var bunkyVRadku = aktivniBunka.parentElement.parentElement.childNodes;
        var td = aktivniBunka.parentElement
        return Array.prototype.indexOf.call(bunkyVRadku, td)
    } else
        return 0;
}

To proto, aby na začátku pokud není vybraná buňka použil index = 0

Editováno 26.10.2016 10:15
 
Odpovědět
26.10.2016 10:15
Avatar
Jan Zamecnik
Člen
Avatar
Jan Zamecnik:26.10.2016 10:44

Pro hraní piškvorek jsem přidal na začátek globální proměnou

var krizek = false;

a upravil funkci:

tdInput.onfocus = function () {
    aktivniBunka = this;
    if (krizek) {
        aktivniBunka.value = "X";
        krizek = false;
    } else {
        aktivniBunka.value = "O";
        krizek = true;
    }
};

Potom po kliknutí na buňku se přidá jednou křížek podruhé kolečko.

 
Odpovědět
26.10.2016 10:44
Avatar
koukalf
Člen
Avatar
koukalf:11.12.2016 22:46

Ahoj, super článek, rád bych se zeptal jak lze nahradit zápis aktivniBunka.pa­rentElement.pa­rent.Element nebo jenom aktivniBunka.pa­rentElement. Google chrome mi háže chybu index.js:158 Uncaught TypeError: Cannot read property 'parentElement' of undefined a já už vážně nevím co s tím.

Když jsem se pokusil o jiný zápis typu - tabulka.childNo­des, tak mi to vzal, ale tam je samozřejmě jiná funkčnost :)

Odpovědět
11.12.2016 22:46
Kvalitní program je jako báseň, pokud do něj nevložíš um, tak se nedá číst.
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.