クリック時にTDを編集
重要度: 5
クリック時にテーブルセルを編集可能にする。
- クリック時に、セルは「編集可能」になります (内部にテキストエリアが表示され) 、HTMLを変更できます。サイズ変更は解除され、すべてのジオメトリは同じままにする必要があります。
- 編集を完了/キャンセルするためのOKおよびキャンセルボタンがセルの下に表示されます。
- 常に編集可能なセルは1つだけです。
が「編集モード」の場合、他のセルをクリックしても無視されます。 - テーブルには多くのセルが含まれることがあります。イベントデリゲーションを使用してください。
デモ
- クリック時に、
innerHTML
を同じサイズでボーダーのない textarea.value
をtd.innerHTML
に設定します。- テキストエリアにフォーカスします。
- セルの下にOK/キャンセルボタンを表示し、それらのクリックを処理します。