jQuery可以使用多个tbody进行排序

时间:2013-04-22 16:15:49

标签: jquery jquery-ui html-table jquery-ui-sortable tablerow

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

1 个答案:

答案 0 :(得分:13)

你有兴趣的结构。

我假设您希望行只能在自己的<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'
});

请评论您的结果。感谢。