Javascript 使用jquery UI Sortable，当没有行时，如何将行拖到表上？ 总结：

我同时使用两个表（使用connectlist），效果非常好，除非其中一个表没有行，我无法将另一个表中的行拖到“空”表上，我想知道这是否受支持，或者我是否需要解决方法

详情/代码： 我有两张桌子相对排列（简化示例）

这是我的CSS：

   <style type="text/css">
    .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
    .ui-sortable-helper {
       transform: rotate(1deg);
       -moz-transform: rotate(1deg);
       -webkit-transform: rotate(1deg);
    }
  </style>

.ui状态突出显示{高度：1.5em；线高度：1.2em；}
.ui可排序帮助程序{
变换：旋转（1deg）；
-moz变换：旋转（1deg）；
-webkit变换：旋转（1deg）；
}

如果其中一个表碰巧没有行，我将无法再将行拖到该表上。当我在firebug中查看时，我仍然可以看到TBODY，即使没有行，所以我不确定出了什么问题

更新： 正如Anton所指出的，这在Chrome中似乎是可行的，但在任何其他浏览器中都不行（我也需要在其他浏览器中工作）

更新#2： 我使用display:block使它工作（并且必须更新我的表格的一些样式）。我现在唯一的问题是，悬停时，这些空表上的突出显示行不是全宽的（我猜是因为display:block）。这里是一个屏幕截图，您可以看到黄色的可排序悬停不是整行。这不是一个拦截器，但如果在有行时使用它，它看起来会更好

---

我找到了一个适用于firefox和IE的解决方案

        <tr><td></td><td></td></tr>
        <tr><td>1</td><td>Name 1</td></tr>
        <tr><td>2</td><td>Name 2</td></tr>
        <tr><td>3</td><td>Name 3</td></tr>

然后您必须将其添加到排序表中：

            start: function(e, ui ){
                ui.placeholder.height(ui.helper.outerHeight()-10);
                ui.placeholder.find("td").css("width", ui.helper.width());
            },

但这会让桌子看起来不一样

如果tbody不包含任何类似的元素，则可以添加类

  stop: function (e, t) {
           if ($(this).children().length == 0) {
               $(this).addClass('test');
           } 
           if($(t.item).closest('tbody').children().length >0){
                  $(t.item).closest('tbody').removeClass('test');
           }
       },

---

我找到了一个适用于firefox和IE的解决方案

        <tr><td></td><td></td></tr>
        <tr><td>1</td><td>Name 1</td></tr>
        <tr><td>2</td><td>Name 2</td></tr>
        <tr><td>3</td><td>Name 3</td></tr>

然后您必须将其添加到排序表中：

            start: function(e, ui ){
                ui.placeholder.height(ui.helper.outerHeight()-10);
                ui.placeholder.find("td").css("width", ui.helper.width());
            },

但这会让桌子看起来不一样

如果tbody不包含任何类似的元素，则可以添加类

  stop: function (e, t) {
           if ($(this).children().length == 0) {
               $(this).addClass('test');
           } 
           if($(t.item).closest('tbody').children().length >0){
                  $(t.item).closest('tbody').removeClass('test');
           }
       },

---

在chrome上运行良好，但我刚刚在firefox上测试了它，但它不起作用，似乎是一个交叉浏览器问题是的，我一直在firefox和IE上测试，但在这两种浏览器上都不起作用。有什么建议吗？也许其他浏览器无法检测到您实际上正在盘旋一个表？试着给桌子（或者tbody）一个

min height

在chrome上很好用，但我刚刚在firefox上测试了它，它不起作用，似乎是一个交叉浏览器问题是的，我一直在firefox和IE上测试，但在这两种浏览器上都不起作用。有什么建议吗？也许其他浏览器无法检测到您实际上正在盘旋一个表？试着给桌子（或者可能是车身）一个

min height

谢谢安东。我很欣赏这种解决方法，但是这个解决方案把我的其他代码搞砸了，我让jquery代码在各行之间循环并更新值（现在它更新这一空行中的值，然后显示出来），你能忽略循环中的第一行吗？否则我找到了另一个解决办法@Leora对于第一个建议，它不仅仅是忽略循环中的第一项，因为我还将css应用于带有填充等的表行，所以我似乎无法创建隐藏行。我正在测试显示：块解决方案now@leora啊，我明白了：/我不知道还有其他方法，如果我发现其他问题，我会更新答案then@leora更新了答案，增加了一个解决方案，这是最可行的解决方案。我很欣赏这种解决方法，但是这个解决方案把我的其他代码搞砸了，我让jquery代码在各行之间循环并更新值（现在它更新这一空行中的值，然后显示出来），你能忽略循环中的第一行吗？否则我找到了另一个解决办法@Leora对于第一个建议，它不仅仅是忽略循环中的第一项，因为我还将css应用于带有填充等的表行，所以我似乎无法创建隐藏行。我正在测试显示：块解决方案now@leora啊，我明白了：/我不知道还有其他方法，如果我发现其他问题，我会更新答案then@leora更新了答案，增加了一个解决方案，这是最可行的解决方案