クリックして TD を編集する
重要性: 5
クリックでテーブルセルを編集可能にしてください。
- クリック時 – セルが “編集可能” (テキストエリアが内部に現れます)になり、HTML を変更することができます。リサイズする必要はなく、すべてのジオメトリは同じままにしてください。
- ボタン OK と CANCEL がセルの下に現れ、編集を 終了/キャンセル することができます。
- 同時に編集可能なセルは1つだけです。
<td>が “編集モード” のとき、他のセルでのクリックは無視されます。 - テーブルは多くのセルを持つ可能性があります。イベント移譲を使ってください。
デモ:
- クリック時 – 同じサイズでボーダーの無い
<textarea>でセルのinnerHTMLを置き換えます。JavaScriptやCSSを利用して適切なサイズを設定できます。 textarea.valueをtd.innerHTMLに設定します。- テキストエリアにフォーカスします。
- セルの下に OK/CANCEL ボタンを表示し、それらのクリックを処理します。