点击编辑表格数据
重要性：5
点击使表格单元格可编辑。
- 点击后 - 单元格应变为“可编辑”（文本区域出现在内部），我们可以更改 HTML。 不应该有调整大小，所有几何形状都应该保持不变。
- 单元格下方会出现“确定”和“取消”按钮以完成/取消编辑。
- 一次只能编辑一个单元格。 当一个
<td>处于“编辑模式”时，点击其他单元格将被忽略。 - 表格可能包含多个单元格。 使用事件委托。
演示
- 点击时 - 将单元格的
innerHTML替换为具有相同大小且无边框的<textarea>。可以使用 JavaScript 或 CSS 设置正确的大小。 - 将
textarea.value设置为td.innerHTML。 - 将焦点设置到文本区域。
- 在单元格下方显示“确定”/“取消”按钮，处理点击事件。