jQuery多tbody可排序。

Question

我有一个包含多个 tbody 的表格。如何为每个 tbody 创建标题？这样做对吗？我使用 jquery ui sortable。如何确保每个 tbody 的标题不可排序？现在我是通过以下方式触发 sortable： $("#sortable > tbody").sortable({});

<table>
    <thead>
        <tr>
            <th>Col1</th>
            <th>Quantity</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <th scope="rowgroup">Col1</th>
            <th>100</th>
        <tr>
        <tr>
            <td>Col1</td>
            <td>20</td>
        <tr>
        <tr>
            <td>Col1</td>
            <td>30</td>
        <tr>
        <tr>
            <td>Col1</td>
            <td>50</td>
        <tr>
    </tbody>
    <tbody>
        <tr>
            <th scope="rowgroup">Col1</th>
            <th>100</th>
        <tr>
        <tr>
            <td>Col1</td>
            <td>20</td>
        <tr>
        <tr>
            <td>Col1</td>
            <td>30</td>
        <tr>
        <tr>
            <td>Col1</td>
            <td>50</td>
        <tr>
    </tbody>
</table>

- user2232982

Answer 1

你那里有一个有趣的结构。

我猜想你希望各自的行只能在它们自己的 <tbody> 中进行排序，同时排除包含 <th> 元素的行。

幸运的是，jQuery 有 :has() 方法。

$("#sortable > tbody").sortable({
    items: 'tr:has(td)'
});

或者tr:not(:has(th))，但似乎效率稍低（猜测）

示例：http://jsfiddle.net/terryyounghk/Bs2jV/

参考：http://api.jquery.com/has-selector/

另外，你可以添加connectWith: 'tbody'，以防你想要在表格中的任何<tbody>上将行设置为可拖放。

例如：

$("#sortable > tbody").sortable({
    items: 'tr:has(td)',
    connectWith: 'tbody'
});

请评论您想要的结果。谢谢。

- Terry Young

---

太好了，谢谢。结构可以不同吗？我一直在寻找在表格内制作小计的方法。 - user2232982

@user2232982 在同一个表格内可能存在多个<thead>元素吗？交替使用 thead、tbody、thead、tbody……是否可行？但如果您关心HTML验证，我不确定它是否是有效的HTML。 - Terry Young

你可以拥有任意数量的 tbody，但只能有一个 thead 和 tfoot。然而，你可以给你的 tbody 一些 CSS 类，并使其中的某些特定类可排序。 - Yanick Rochon

您可以随时使用可排序的“取消”选项来获取您的解决方案。 - Deepak Singh