我正在编写一个小脚本来使HTML元素可编辑。当您单击某个元素时，它将替换为textarea，您基本上可以输入新文本。按Enter键时，textarea将替换为原始元素，并更新innerHTML。
脚本的演示在这里：http://iambot.net/demo/editable/
现在问题在于内联表编辑。它在FF 3.6上完美运行，但在Chrome / Safari上，一旦更新单元格的值，更新单元格的位置会向右移动一个单元格的宽度。（只需在Chrome / Safari中试用该演示）完全搞砸整张桌子。我是CSS的初学者，无法确定我出错的地方。
任何帮助/指针赞赏！感谢。
答案 0 :(得分：1)
我认为这可能与使用textarea替换表格单元格有关，而textarea具有非常不同的显示行为。它也可能与<table>元素的可变宽度有关。但是，为了简单起见，我想看看是否可以简化删除cloneNode()的{{1}}。
我稍微修改了你的代码并将其发布在这里：
editable.js： http://pastie.textmate.org/private/u4nruhu9pzgjjv5kwigo3q
editable.html：http://pastie.textmate.org/private/hdpib2ksrllotmqi3gzkia
它现在适用于Chrome和Firefox，但您可能仍想稍微调整一下。基本上我只是更改它以保存_oldChild的{{1}}值，清空.innerHTML的内容并将_child（_child）作为{的子项{1}}。恢复视图时，我只需从DOM中删除<textarea>并恢复_node的内容。
我希望这会有所帮助。如果您有任何问题，请随时联系。