如何在不对特定行进行排序的情况下使 html-table 可排序？

Question

我有一个 html 表，它有一个标题，应该可以点击来对点击列上的行进行排序。这里棘手的部分是，表中有一些不应该排序的行，属于该特定行的行应该保留在该行之下。这是一些代码，所以你明白我在说什么。

<table>
    <thead>
        <tr>
            <th>User</th>
            <th>Item</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="5" style="text-align:left;">Peter</th>
        </tr>
        <tr>
            <td></td>
            <td>Apple</td>
            <td>10</td>

        </tr>
        <tr>
            <td></td>
            <td>Pineapple</td>
            <td>15</td>

        </tr>
        <tr>
            <th colspan="5" style="text-align:left;">Stan</th>
        </tr>
        <tr>
            <td></td>
            <td>Banana</td>
            <td>7</td>
        </tr>
        <tr>
            <td></td>
            <td>Orange</td>
            <td>10</td>
        </tr>
    </tbody>
</table>

因此，例如，如果我单击 Item-Header，Apple + Pineapple 行在排序时应保持在 Peter 和 Stan 行之间。如果我点击 User-Header，Peter 和 Stan 应该被排序，而 Items Apple + Pineapple 保留在 Peter 行下，Banana 和 Orange Items 保留在 Stan 行下......我希望你明白我的意思。 我已经用 jquery tablesorter-plugin 尝试过，但我找不到任何适合我的解决方案。

Answer 1

您需要将每个行块括在单独的 tbody 中。

然后点击User只会对tbodys进行排序，而点击其他ths会分别对每个tbody进行排序。

编辑

表格应如下所示：

<table>
  <thead>
    <tr>
        <th>User</th>
        <th>Item</th>
        <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <th colspan="5" style="text-align:left;">Peter</th>
    </tr>
    <tr>
        <td></td>
        <td>Apple</td>
        <td>10</td>

    </tr>
    <tr>
        <td></td>
        <td>Pineapple</td>
        <td>15</td>

    </tr>
  </tbody>
  <tbody>
    <tr>
        <th colspan="5" style="text-align:left;">Stan</th>
    </tr>
    <tr>
        <td></td>
        <td>Banana</td>
        <td>7</td>
    </tr>
    <tr>
        <td></td>
        <td>Orange</td>
        <td>10</td>
    </tr>
  </tbody>