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行之间。如果我点击用户标题，彼得和斯坦应该排序，而项目苹果+菠萝仍然在彼得排，香蕉和橙色项目仍然在斯坦排...我希望你明白我的意思。我已经用jquery tablesorter-plugin尝试了它，但我找不到任何适合我的解决方案。

Answer 1

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

中

然后点击User只会对tbody进行排序，点击其他th会对每个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>

如何在不排序特定行的同时使html表可排序？

1 个答案: