回到课程

点击时编辑单元格

重要程度: 5

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

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

演示:

打开一个任务沙箱。

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

使用沙箱打开解决方案。