用 TD 标签替换表格行的 AJAX 响应在 Chrome 中被讨厌答案

【问题标题】：AJAX response with TD tags replacing table row is placed nasty in Chrome用 TD 标签替换表格行的 AJAX 响应在 Chrome 中被讨厌
【发布时间】：2011-09-13 13:30:33
【问题描述】：

我正在尝试在 Google App Engine 上将 editInPlace JavaScript 代码与 Python 和 Django 一起使用。编辑表格行后：

<table>
  <tr id="editme" class="editme">
    <td>Date</td>
    <td>Description</td>
    <td>Details</td>
  </tr>
  <tr id="editme" class="editme">
    <td>Date</td>
    <td>Description</td>
    <td>Details</td>
  </tr>
  <tr id="editme" class="editme">
    <td>Date</td>
    <td>Description</td>
    <td>Details</td>
  </tr>
</table>

看起来像这样：

 ___ ___ ___
|___|___|___|
|___|___|___|
|___|___|___|

我认为 editInPlace JavaScript 会保存原始字符串，例如“<td>Date</td><td>Description</td><td>Details</td>”，方法是将其替换为不带<td>（例如“日期描述详细信息”）的条纹字符串，将字符串放入<td colspan="3"><form>...</form></td> 以供编辑器编辑.

所以在这里我准备提交新值后的 Http Response 也将模仿 3 列，我的意思是将 <td></td> 标签（例如“<td>ResponseDate</td><td>ResponseDescription</td><td>ResponseDetails</td>”）放置在 <tr></tr> 标签之间。

但问题是，在 AJAX 替换值而不刷新孔页之后，给了我讨厌的表。 Chrome v12 中的所有行就像移动了一个边并从第二个列开始填充：

 ___ ___ ___
|___|___|___|___
 ___|___|___|___|
|___|___|___|

【问题讨论】：

我遇到了这个确切的问题，看起来还没有解决。
你能展示一下，你是如何把编辑的行放进去的吗？（脚本（
如果你使用document.getElementById('tr_id').innerHTML = '<td>Cell 1</td>';之类的东西，它可能会导致它。如果您愿意，请尝试appendChild 或insertBefore。
你能把生成的HTML放到像JSFiddle这样的服务中，这样我们就可以看到表格的代码了吗？
在 Chrome v13 的一个非常基本的示例中不会发生。你试过以后的版本吗？你是如何将结果插入到你的表中的？

标签： javascript ajax google-chrome html-table

【解决方案1】：

请在受影响的行被编辑（并以错误的方式显示）后使用 Chrome 开发人员工具检查它 - 右键单击任何单元格并在弹出菜单中选择“检查元素”。 DevTools 窗口将出现，您将能够检查（在元素面板中）最终的 DOM 是否正确。如果是，那么它是一个 Chrome/WebKit 错误。

【讨论】：

附件是渲染 dom 的屏幕截图以及检查器中显示的内容。 HTML 是正确的并且与下一行相同。 www.richardson.co.nz/chrome_error.png
除非第一行有一些特别奇怪的 CSS 样式（tr:first-child 或类似的），否则这是一个 WebKit 重排错误。在 Safari 中重现此问题将使其成为一个万无一失的 WebKit 错误，而不是特定于 Chrome。您可以在 bugs.webkit.org/enter_bug.cgi 的 WebKit 错误跟踪器中报告它（您必须先快速注册。）
所以这个错误是暂时的，我现在无法在重新启动后重新创建。显示它的 chrome 副本已经打开了大约 100 多个小时。
很高兴听到！现在已经发布了一个新的稳定版本，请随意尝试一下，看看那里是否也没有问题。
我已尝试重启并清除缓存。对我来说没有快乐。我正在使用 Chrome 19，现在期待其他可怜的灵魂找到这个问题。

【解决方案2】：

对我来说，在多个

上使用相同的 ID 似乎很尴尬。

这可能会导致一些奇怪的行为。

保留每个 DOM 的唯一 ID。

我也会用

<div>

代替表格

因为有了

，你可以通过 CSS 获得更多的控制权。

HTML：

<div>
  <div class="editme">
    <div>Date</div>
    <div>Description</div>
    <div>Details</div>
  </div>
  <div class="editme">
    <div>Date</div>
    <div>Description</div>
    <div>Details</div>
  </div>
  <div class="editme">
    <div>Date</div>
    <div>Description</div>
    <div>Details</div>
  </div>
</div>

CSS：

.editme { clear:both; }
.editme div { float:left; }

所以在像这样改变你的 HTML 和 CSS 之后

你可以简单地替换这三个 div

使用单个 DIV 和 FORM

Here is an example of DIV version

【讨论】：

绝对是表格数据，因此是表格布局。

【解决方案3】：

我的问题总结

经过一段时间调试我的问题后，我发现我的问题是由以下情况引起的。

一个样式为content: ""的类在ajax调用之前应用于目标TR，它将用一组新的TD替换TD，然后，在删除该类后，我遇到了与OP相同的问题；最终结果是 TD 向右移动。检查的 HTML 是健全的。

详细来说，这就是我所拥有的。

我有一个 TR，它是我的 targetId 容器。
我有一个带有 ajax 链接的 TD，然后返回一组 TD 以替换 targetId TR 中的旧集。
我正在使用 jquery ajax，在调用之前，我将一个类应用于 targetId TR，which can be found in this answer 的类并包含 content: "" 样式。
ajax 调用完成后，删除该类。

这就是我最终要做的。

我为 targetId 使用的 ajax 掩码类，我替换为一个新的类，它只是做了一些不透明度。我为发送者控件保留了 ajax 掩码类。

关于 OP 的问题

我下载并搜索了 OP 使用的“jquery-editinplace”，但找不到正在应用的 content 样式。也许有好的搜索工具的人可能会找到它。如上面的cmets所述，chrome升级后问题就消失了。这是我保留的情况，因为可能相关。

我没有处理这种情况，因为我在创建 ajax 场景时遇到了麻烦。我很想证明这是一个 chrome 错误并将其提交给 Google。

如果有不清楚的地方，请随时发表评论，我会相应地更新我的答案。

【讨论】：