我们希望将这个开源项目提供给全世界的人。请帮助我们将教程的内容 翻译为你所掌握的语言 对应的版本。
è´­ä¹°EPUB/PDF
教程路线图
回到课程

点击即可编辑单元格

重要程度: 5

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

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

示例：

打开一个任务沙箱。

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

使用沙箱打开解决方案。