Chrome/IE 表格单元格定位帮助答案

【问题标题】：Chrome/IE table cell positioning helpChrome/IE 表格单元格定位帮助
【发布时间】：2011-02-17 03:11:23
【问题描述】：

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

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

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

任何帮助/指针表示赞赏！谢谢。

【问题讨论】：

标签： javascript css safari google-chrome

【解决方案1】：

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

我稍微修改了你的代码并发布在这里：

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

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

它现在在 Chrome 和 Firefox 中适用于我，但您可能仍想稍微调整一下。基本上我只是将其更改为保存_child 的.innerHTML 值，清空_child 的内容并将<textarea> (_node) 作为_child 的子代。恢复视图时，我只是从 DOM 中删除 _node 并恢复 _child 的内容。

我希望这会有所帮助。如果您有任何问题，请随时询问。

【讨论】：

效果很好！万分感谢！不过有点怀疑。为什么需要 preventDefault 和 stopPropagation 方法？
代码中有两个 onClick 处理程序，一个用于document，一个用于.editable 元素。如果在.editable 上发生点击，您不希望事件冒泡并为您的document 处理程序再次触发。 stopPropagation() 防止冒泡。不过，preventDefault() 可能是不必要的。我相信它只会阻止浏览器对事件的默认操作，对于您正在使用的元素来说，它不应该存在。打字只是习惯。 :)