返回課程

按一下編輯 TD

重要性:5

按一下即可編輯表格儲存格。

  • 按一下 – 儲存格應變為「可編輯」(內部會出現文字方塊),我們可以變更 HTML。不應調整大小,所有幾何形狀都應保持相同。
  • 儲存格下方會出現確定和取消按鈕,用於完成/取消編輯。
  • 一次只能編輯一個儲存格。當 <td> 處於「編輯模式」時,將會忽略對其他儲存格的按一下動作。
  • 表格可能有很多儲存格。使用事件委派。

示範

開啟一個沙盒來執行任務。

  1. 按一下 – 使用相同大小和無邊框的 <textarea> 取代儲存格的 innerHTML。可以使用 JavaScript 或 CSS 來設定正確的大小。
  2. textarea.value 設定為 td.innerHTML
  3. 將焦點放在 textarea 上。
  4. 在儲存格下方顯示確定/取消按鈕,並處理按鈕上的點擊事件。

在沙盒中開啟解決方案。