Editace TD po kliknutí

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:

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.
Nastavíme textarea.value na td.innerHTML.
Nastavíme fokus na textovou plochu.
Pod buňkou zobrazíme tlačítka OK/STORNO a zpracujeme kliknutí na ně.