Question

我有多个表...（在表内）拖放行效果很好。但是如何对表格本身进行排序？我需要两者：对表中的行进行排序，并对表本身进行排序。

<table class="sortable-table table table-bordered">
  <thead class="thead-light">
    <tr>
      <th scope="col">FOO</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TABLE 1 ROW 1</td>
    </tr>
    <tr>
      <td>TABLE 1 ROW 2</td>
    </tr>
  </tbody>
</table>

<table class="sortable-table table table-bordered">
  <thead class="thead-light">
    <tr>
      <th scope="col">FOO2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TABLE 2 ROW 1</td>
    </tr>
    <tr>
      <td>TABLE 2 ROW 2</td>
    </tr>
  </tbody>
</table>

// works fine
$( "table tbody" ).sortable({});
// ?
$( ".sortable-table" ).sortable({});

Answer 1

如果$( "table tbody" ).sortable({});工作正常，请尝试以下操作：

$( ".sortable-table tbody" ).sortable({}); // table
$( ".sortable-table tbody tr" ).sortable({}); // table row

编辑：

您可能想将html包装在包装器中。您可以这样做：

<div class="wrapper">
  <table class="sortable-table table table-bordered">
  ...
  </table>
  <table class="sortable-table table table-bordered">
  ...
  </table>
</div>

现在您可以像这样对表和行进行排序：

$( ".wrapper" ).sortable( {})
$( ".sortable-table tbody tr" ).sortable({});

更多有关选择器的信息：

https://www.w3schools.com/jquery/jquery_selectors.asp

https://johnny.github.io/jquery-sortable/

您可以使用space

在jQuery中像CSS一样选择子元素。

Answer 2

我找到了解决方案：我添加了一个包装器类

<div class="wrapper">
    <table class="sortable-table table table-bordered">
    ...

$（“ .wrapper”）.sortable（{}）

多个表格拖放

2 个答案: