用TD标签替换表格行的AJAX响应在Chrome中令人讨厌

问题描述

| 我正在尝试在Google App Engine上的Python和Django中使用editInPlace JavaScript代码。 编辑表格的行后：

<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>

的带区字符串来保存\“

<td>Date</td><td>Description</td><td>Details</td>

\”之类的原始字符串（例如\“ Date Description Details \”），将字符串放入

<td colspan=\"3\"><form>...</form></td>

中供编辑器进行编辑。 所以在这里，我准备提交一个新值后的Http Response也将模仿3个cols，我的意思是将在

<tr></tr>

标签之间放置

<td></td>

标签（例如\“

<td>ResponseDate</td><td>ResponseDescription</td><td>ResponseDetails</td>

\”）。 但是问题是，在AJAX替换值后不刷新孔页后，给我带来了讨厌的表。 Chrome v12中的所有行都像移到一边，然后从第二行开始填充：

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

    

解决方法

        编辑受影响的行（并以错误的方式显示）后，请使用Chrome开发者工具检查该行-右键单击任何单元格，然后在弹出菜单中选择\“检查元素\”。将显示DevTools窗口，您将能够（在Elements面板中）检查最终DOM是否正确。如果是的话，那就是Chrome / WebKit错误。     ,        我的问题总结 经过一段时间调试我的问题后，我发现我的问题是由以下情况引起的。 在ajax调用之前，将样式为“ 9”的类应用于目标TR，该类将用一组新的TD替换TD，然后，在删除该类之后，我遇到了与OP相同的问题；最终结果是TD向右移动。检查中的HTML是正确的。 详细地说，这就是我所拥有的。 我有一个TR，这是我的targetId容器。 我有一个带有ajax链接的TD，然后返回了一组TD来替换targetId TR中的旧集合。 我正在使用jquery ajax，在调用之前，我将一个类应用于targetId TR，该类可在此答案中找到并包含

content: \"\"

样式。 ajax调用完成后，删除该类。 这就是我最终要做的。 我用于targetId的ajax遮罩类被一个新的类替换，该类只是做了一些不透明性。我为发送者控件保留了ajax屏蔽类。 关于OP的问题 我下载并搜索了OP使用的\“ jquery-editinplace \”，但找不到正在应用的“ 11”样式。也许拥有良好搜索工具的人可能会找到它。如以上评论所述，铬升级后问题消失了。这是我的情况，因为可能有关联。 由于创建ajax场景时遇到麻烦，因此我没有摆弄这种情况。我想证明这是一个Chrome错误，然后将其提交给Google。 如果有不清楚的地方，请随时发表评论，我将相应地更新我的答案。     ,        对我来说，在多个上使用相同的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 用一个带有FORM的DIV 这是DIV版本的示例