レッスンに戻る

クリック時にTDを編集

重要度: 5

クリック時にテーブルセルを編集可能にする。

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

デモ

このタスクのサンドボックスを開きます。

  1. クリック時に、innerHTML を同じサイズでボーダーのないに置換します。JavaScriptまたはCSSを使用して、適切なサイズを設定できます。
  2. textarea.valuetd.innerHTMLに設定します。
  3. テキストエリアにフォーカスします。
  4. セルの下にOK/キャンセルボタンを表示し、それらのクリックを処理します。

サンドボックスで解決策を開きます。