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

如何解决用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版本的示例