Javascript Chrome/IE表格单元格定位帮助

我正在制作一个小脚本，使HTML元素可编辑。当你点击一个元素时，它会被替换为一个文本区域，你基本上可以输入新的文本。按enter键时，textarea将替换为原始元素，并更新其innerHTML

下面是脚本的演示：

现在的问题是内联表编辑。它在FF 3.6上运行得非常好，但在Chrome/Safari上，一旦单元格的值被更新，更新后的单元格的位置就会向右移动一个单元格的宽度。（只需在Chrome/Safari中尝试演示）它完全搞乱了整个表格。我是CSS的初学者，无法确定我到底错在哪里

---

感谢您的帮助/指点！谢谢。

我认为这可能与将表格单元格替换为文本区域有关，文本区域具有非常不同的显示行为。它还可能与

元素的可变宽度有关。然而，为了简单起见，我想尝试看看是否可以简化为删除

\u oldChild

的

cloneNode（）

我稍微修改了您的代码，并将其发布在此处：

可编辑的.js：

可编辑.html：

我现在可以在Chrome和Firefox中使用它，但你可能仍然需要对它进行一些调整。基本上，我只是将其更改为保存

\u child

的

.innerHTML

值，清空

\u child

的内容，并将

（

\u节点

）作为

\u child

的子节点。恢复视图时，我只需从DOM中删除

\u节点

，并恢复

\u子节点

的内容

---

我希望这有帮助。如果您有任何问题，请立即提问。

效果很好！非常感谢！不过有点疑问。为什么需要preventDefault和stopPropagation方法？代码中有两个onClick处理程序，一个用于

文档

，另一个用于

可编辑

元素。如果在

.editable

上单击，则您不希望事件冒泡，并为您的

文档

处理程序再次触发。

stopPropagation（）

可防止冒泡。不过，

preventDefault（）

可能是不必要的。我相信它只是阻止了浏览器对事件的默认操作，而您正在使用的元素不应该存在默认操作。把它打印出来只是一种习惯