点击即可编辑单元格
重要程度: 5
使单元格在点击时可编辑。
- 点击时 —— 单元格应该变成“可编辑的”(在里面会出现文本区域),我们修改其中的 HTML。在这不调整单元格大小,所有几何形状保持不变。
- OK 和 CANCEL 按钮会出现在单元格的下面,用以完成/取消编辑。
- 同一时刻只有一个单元格可被编辑。当一个
<td>
处于“编辑模式”时,在其它单元格上的点击会被忽略。 - 该表格可能有很多单元格。请使用事件委托。
示例:
- 在点击时 —— 用相同尺寸且无边框的
<textarea>
替换单元格的innerHTML
。可以使用 JavaScript 或 CSS 设置正确的尺寸。 - 将
textarea.value
设置为td.innerHTML
。 - 聚焦在文本区域(textarea)。
- 在单元格下方应该显示 OK/CANCEL 按钮,并处理对它们的点击事件。