jQuery UI可排序，带有表格和模式弹出窗口

One：我需要一个具有可排序行的表（请参见jqueryui.com）。通常，这些示例会为您提供列表项，但很有可能对表行执行此操作。这是我的家庭作业和他的JSFIDLE：他基本上解释了使表行可排序的修复方法

Two：我需要这些可排序的表行在悬停时有一个模式弹出窗口。看来我只能有一个或另一个。可以是可排序的行移动，但弹出窗口不起作用（它在我这边排序/拖动，但不在小提琴上）或者模式弹出窗口起作用并排序，但它是列表项。(). 然后出现了一种奇怪的情况，一行被踢出表外，只有它的hover有效（）。无论如何，由于正确的间距以及我还需要动态创建新行的事实，我需要行。有什么想法吗

这是我的可排序表的HTML:

<table class="table_177" id="sortable2" class="connectedSortable inputboxes">
<thead>
  <tr>
    <th>Vessel Name</th>
    <th>Hull/IMO No.</th>
  </tr>
</thead>  
  <tr>
    <a class="productsModal1" style="text-decoration:none">
    <td class="ui-state-highlight" style="border-right:none">SS Mary Mae</td>
    <td class="ui-state-highlight" style="border-left:none">12345</td></a>
  </tr>      
  <tr>
    <a class="productsModal1" style="text-decoration:none">
    <td class="ui-state-highlight" style="border-right:none">EMS 234</td>
    <td class="ui-state-highlight" style="border-left:none">12346</td></a>
  </tr> 
</table>

$(window).load(function(){
// Return a helper with preserved width of cells
var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      $(this).width($originals.eq(index).width())
    });
    return $helper;
};
    $("#sortable2 tbody").sortable({helper: fixHelperModified}).disableSelection();
});//]]> 

• 首先，删除包装

  td

  的锚定标记，因为这是无效的HTML。。将类添加到tr中，还可以使用数据索引来存储默认索引，因为您将移动它们，并且需要一种方法将它们与模型关联起来

将tr更改为此

<tr class="productsModal1" data-index=0>
  <td class="ui-state-highlight" style="border-right:none">SS Mary Mae</td>
  <td class="ui-state-highlight" style="border-left:none">12345</td>
</tr>
<tr class="productsModal1" data-index=1>
  <td class="ui-state-highlight" style="border-right:none">EMS 234</td>
  <td class="ui-state-highlight" style="border-left:none">12346</td>
</tr>

---

我认为锚定标签不是

标签的有效子标签。。或

。。您是否正在寻找一个具有可排序行的表？还是多张桌子？只有一张桌子。该表需要可排序并具有弹出模式。完美修复，再次@Wirey.ok。因此，我以前可以向可排序表中添加新行，而新代码我不能。有没有办法实现这一点？这里有用户输入框，用户输入信息并单击按钮。该信息使用相同的悬停模式功能添加到可排序表中。当我之前让它工作时，从视觉上看它看起来是正确的，但是它没有modals，它阻止了表的其余部分进行排序。可能是因为我使用的是innerHTML而不是jQuery？两者都可以。那么你也在动态创建divs modal divs吗？@triplethreat77如果这有助于你解决问题，请告诉我@triplethreat77 hmmm。。新行是否具有悬停模式？您是否委托了小提琴中所示的悬停事件？由于您正在动态添加元素，所以我对其进行了更改。。同样，对于select，您可以执行相同的操作，只需修改其他文本即可

<tr class="productsModal1" data-index=0>
  <td class="ui-state-highlight" style="border-right:none">SS Mary Mae</td>
  <td class="ui-state-highlight" style="border-left:none">12345</td>
</tr>
<tr class="productsModal1" data-index=1>
  <td class="ui-state-highlight" style="border-right:none">EMS 234</td>
  <td class="ui-state-highlight" style="border-left:none">12346</td>
</tr>

$('#sortable2 tbody tr').on({
    mouseenter: function () {
      $('div.' + $(this).attr('class')) // <-- this gets the div.. though the share the same class so can probably just hardcode
            .eq($(this).data('index')) // <-- gets the correct one according to data-index
            .show();
    },
    mouseleave: function () {
      $('div.' + $(this).attr('class'))
            .eq($(this).data('index'))
            .hide();
    }
});

$('#sortable2 tbody tr').each(function(i,v){
     $(this).data('index',i);
});