Question

我正在尝试将editInPlace JavaScript代码用于Python＆amp; Google App Engine上的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>的条带字符串（例如“日期描述详细信息”）将字符串放入{{1编辑器编辑。

所以我在这里准备提交新值后的Http响应也会模仿3个cols，我的意思是将<td colspan="3"><form>...</form></td>个标签（例如“<td></td>”）置于{ {1}}代码。

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

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

Answer 1

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

Answer 2

我的问题摘要

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

在ajax调用之前将样式content: ""应用于目标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 masking类，我替换了一个刚刚做了一些不透明度的新类。我为发件人控件保留了ajax掩码类。

与OP的问题有关

我下载并搜索了OP使用的“jquery-editinplace”但找不到应用的content样式。也许拥有优秀搜索工具的人可能会找到它。如上面的评论中所述，当Chrome升级时，问题就消失了。这是我的情况，因为可能有相关的东西。

我没有弄清楚这种情况，因为我在创建ajax方案时遇到了麻烦。我本来希望证明它是一个chrome bug并将其提交给Google。

如果事情不清楚，请随意发表评论，我会相应地更新我的答案。

Answer 3

对我来说，在多个＆lt; tr＆gt;上使用相同的Id看起来很尴尬。

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

保留每个DOM的唯一ID。

我也会用

<div>

而不是表格

因为使用＆lt; div＆gt;，您可以通过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

Here is an example of DIV version

使用TD标签替换表格行的AJAX响应在Chrome中显得很糟糕

3 个答案: