按一下編輯 TD
重要性:5
按一下即可編輯表格儲存格。
- 按一下 – 儲存格應變為「可編輯」(內部會出現文字方塊),我們可以變更 HTML。不應調整大小,所有幾何形狀都應保持相同。
- 儲存格下方會出現確定和取消按鈕,用於完成/取消編輯。
- 一次只能編輯一個儲存格。當
<td>
處於「編輯模式」時,將會忽略對其他儲存格的按一下動作。 - 表格可能有很多儲存格。使用事件委派。
示範
- 按一下 – 使用相同大小和無邊框的
<textarea>
取代儲存格的innerHTML
。可以使用 JavaScript 或 CSS 來設定正確的大小。 - 將
textarea.value
設定為td.innerHTML
。 - 將焦點放在 textarea 上。
- 在儲存格下方顯示確定/取消按鈕,並處理按鈕上的點擊事件。