See More

Chceme tento open-source projekt zpřístupnit lidem po celém světě.

Pomozte přeložit obsah tohoto tutoriálu do svého jazyka!

Mapa tutoriálu
zpět k lekci

Editace TD po kliknutí

důležitost: 5

Umožněte editaci buněk v tabulce po kliknutí.

  • Po kliknutí by se buňka mÄ›la stát „editovatelnou“ (uvnitÅ™ se objeví textová plocha), můžeme mÄ›nit HTML kód. NemÄ›la by zmÄ›nit velikost, veÅ¡kerá geometrie by mÄ›la zůstat stejná.
  • Pod buňkou se objeví tlačítka OK a STORNO pro ukončení/zruÅ¡ení editace.
  • Je možné editovat pouze jednu buňku současnÄ›. Dokud je <td> v „editačním režimu“, kliknutí na ostatní buňky bude ignorováno.
  • Tabulka může obsahovat mnoho bunÄ›k. Použijte delegování událostí.

Demo:

Otevřít pískoviště pro úlohu.

  1. Po kliknutí nahradíme innerHTML buňky za <textarea> o stejné velikosti a bez ohraničení. K nastavení správné velikosti můžeme použít JavaScript nebo CSS.
  2. Nastavíme textarea.value na td.innerHTML.
  3. Nastavíme fokus na textovou plochu.
  4. Pod buňkou zobrazíme tlačítka OK/STORNO a zpracujeme kliknutí na ně.

Otevřít řešení na pískovišti.