jQuery 可对多个 tbody 进行排序

Question

我有一个包含多个tbody的表。如何为每个tbody制作 header ？这是要怎么做呢？我使用 jquery ui 可排序。如何确定每个 tbody 的 header 不可排序？现在我正在触发排序 $("#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>

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' ，以防万一您想要行 droppable至任何<tbody>在您的表格中。

如:

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

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