回到课程

点击即可编辑单元格

重要程度: 5

使单元格在点击时可编辑。

  • 点击时 —— 单元格应该变成“可编辑的”(在里面会出现文本区域),我们修改其中的 HTML。在这不调整单元格大小,所有几何形状保持不变。
  • OK 和 CANCEL 按钮会出现在单元格的下面,用以完成/取消编辑。
  • 同一时刻只有一个单元格可被编辑。当一个 <td> 处于“编辑模式”时,在其它单元格上的点击会被忽略。
  • 该表格可能有很多单元格。请使用事件委托。

示例:

打开一个任务沙箱。

  1. 在点击时 —— 用相同尺寸且无边框的 <textarea> 替换单元格的 innerHTML。可以使用 JavaScript 或 CSS 设置正确的尺寸。
  2. textarea.value 设置为 td.innerHTML
  3. 聚焦在文本区域(textarea)。
  4. 在单元格下方应该显示 OK/CANCEL 按钮,并处理对它们的点击事件。

使用沙箱打开解决方案。