javascript - Chrome/IE 表格单元定位帮助

Question

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

脚本演示在这里:http://iambot.net/demo/editable/

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

感谢任何帮助/指点!谢谢。

Answer 1

我相信这可能与将表格单元格替换为文本区域有关，它们具有非常不同的显示行为。这也可能与 <table> 的可变宽度有关。元素。但是，为了简单起见，我想看看是否可以简化删除 cloneNode()的 _oldChild .

我稍微修改了您的代码并将其发布在这里:

可编辑的.js: http://pastie.textmate.org/private/u4nruhu9pzgjjv5kwigo3q

editable.html:http://pastie.textmate.org/private/hdpib2ksrllotmqi3gzkia

它现在适用于 Chrome 和 Firefox，但您可能仍想稍微调整一下。基本上我只是改变它来保存 .innerHTML _child 的值, 清空 _child 的内容并放置 <textarea> ( _node ) 作为 _child 的 child .恢复 View 时，我只是删除了 _node从 DOM 恢复 _child 的内容.

希望对您有所帮助。如果您有任何问题，请提出。