我不想在拖动和排序时包含行

Question

我有下表从循环中的数据库中提取出来。 我想拖放以下行。

“排序”按钮列的rowspan是动态的。 （这将是行数）。 我的问题是当我拖动行进行排序时，我不想包含“排序”按钮列。

拖动第一行后，“排序”按钮列已移动，拖动的行如下所示。

由于

Answer 1

糟糕的语义

这里的主要问题是您的保存按钮是表格的一部分。为什么？ table元素用于表示表格数据，按钮不是表格数据。

如果你的HTML语义更准确，你就完全避免了这个问题：

<!-- Section A -->
<section>
    <table>
        ...
    </table>
    <button>Save</button>
</section>

通过这种方式，您可以拖动行，而​​不必担心您的button被包含在拖动中。您的每个相关部分表都包含一个单独的section元素，button是独立的。

使用CSS我们可以将按钮设置为与表格相关的样式。第一步是将表格设置为display: inline-table以允许按钮位于其旁边。

演示

＆＃13;

＆＃13;

section {
  margin-bottom: 20px;
}

table {
  display: inline-table;
  vertical-align: top;
}

th, td {
  text-align: left;
}

button {
  vertical-align: bottom;
}

＆＃13;

<section>
  <table>
    <thead>
      <tr>
        <th colspan="3">Section A</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Section</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>AA</td>
        <td>13</td>
        <td>SG</td>
      </tr>
      <tr>
        <td>BB</td>
        <td>16</td>
        <td>JP</td>
      </tr>
    </tbody>
  </table>
  <button>Save</button>
</section>

<section>
  <table>
    <thead>
      <tr>
        <th colspan="3">Section B</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Section</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>AA</td>
        <td>13</td>
        <td>SG</td>
      </tr>
      <tr>
        <td>BB</td>
        <td>16</td>
        <td>JP</td>
      </tr>
    </tbody>
  </table>
  <button>Save</button>
</section>

＆＃13;

＆＃13;

＆＃13;