javascript - 我不想在拖动和排序时在行中包含列

Question

我在循环中从数据库中提取了下表。 我想拖放以下行。

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

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

谢谢

Answer 1

语义不佳

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

如果您的 HTML 具有更准确的语义，您就可以完全避免这个问题:

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

有了它，您就可以拖动行而不必担心您的 button 被包含在拖动中。您将有一个单独的 section 元素来包装每个相关的节表，并且 button 是独立的。

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

---

演示

section {
  margin-bottom: 20px;
}

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

th, td {
  text-align: left;
}

button {
  vertical-align: bottom;
}

<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>