使用 jQueryUI 可排序（但仅限 Chrome）删除一行时，1 个额外的表格单元格

Posted 2023-05-08

【中文标题】使用 jQueryUI 可排序（但仅限 Chrome）删除一行时，1 个额外的表格单元格

【英文标题】：1 extra table cell when a row is dropped with jQueryUI sortable (but Chrome only)

【发布时间】：2011-12-17 07:51:56

【问题描述】：

我有一个使用 jQuery、jQuery UI 和 Backbone.js 的应用程序。最近开发了一个错误，当删除表中的一行（jQUery Sortable）时，不同的行有时会在一行上移动，就好像有一个额外的单元格一样，但在检查时没有。我刚刚注意到，这只发生在 Chrome、Chromium 和 ChromeFrame 中。

这里是问题区域的截图：http://img208.imageshack.us/img208/6870/screenshotkz.png

下面是Chrome检查界面的html截图：http://img16.imageshack.us/img16/6985/screenshot1wdo.png 我还复制了下面的 HTML：

<tr id="17052151" class="wo">
<td>17052151</td>
<td>XXXXXXXXXXX</td>
<td>XXXXXXXXXXXXX</td>
<td>Parts Here</td>
<td>RR</td>
<td>10/28/11</td>
<td>10/28/11</td>
<td>10</td>
<td><input type="text" class="woComment" value=""></td>
<td class="removeWO">X</td>
</tr>
<tr id="10097756" class="wo">
<td>10097756</td>
<td>XXXXXXXXXXXX</td>
<td>XXXXX</td>
<td>Parts Here</td>
<td>NIS</td>
<td>10/04/11</td>
<td>10/28/11</td>
<td>10</td>
<td><input type="text" class="woComment" value=""></td>
<td class="removeWO">X</td>
</tr>
<tr id="10095965" class="wo">
<td>10095965</td>
<td>XXXXXXXX</td>
<td>XXXXXXXXXXXXXXXX</td>
<td>Parts Here</td>
<td>NIS</td>
<td>09/16/11</td>
<td>10/10/11</td>
<td></td>
<td><input type="text" class="woComment" value=""></td>
<td class="removeWO">X</td>
</tr>

由于在 Firefox 或 IE8 中不会出现此问题，因此我认为这可能是 Chrome 错误，但我想看看其他人之前是否遇到过此问题。

编辑 我发现为出现问题的视图元素调用.render() 函数可以解决此问题。

【问题讨论】：

这是一个 chrome 错误，但我还没有找到修复它的方法。最常见的建议是做一些导致页面重绘的事情。

在获得更多帮助之前，您必须包含 CSS。这是基本的小提琴，添加相关的 CSS（和 JS/HTML，如果适用）：jsfiddle.net/cZ4n4

@RobW jsfiddle.net/cZ4n4/2 当你只对行而不是列进行垂直排序时，也会发生同样的事情

@RobW jsfiddle.net/cZ4n4/5

【参考方案1】：

也许我完全没有理解你的意思，但你能否澄清一下：你确实希望整行是可排序的，这意味着第 1 行、第 2 行和第 3 行可以通过拖动来互换？

如果是这样的话，你实际上会让 tbody 成为可排序的，而不是 tr；将 sortable 应用于 tr 是导致此处出现奇怪行为的原因，因为 jqueryui 试图使 tr 的内容可排序，这非常糟糕。要对行进行排序，请将 tbody 设置为可排序的，因此它会尝试对表格行进行排序。

http://jsfiddle.net/cZ4n4/10/