jQuery sortable with multiple tbody

Question

I have a table with multiple tbody. How can I make headers for each tbody? Is this how to do it? I use jquery ui sortable. How can I be sure the header of each tbody isn't sortable? Right now I'm triggering sortable with $("#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

Interesting structure you've got there.

I assume you want the rows sortable only within their own <tbody> respectively, excluding the row(s) that contain <th> elements.

Luckily, jQuery has :has()

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

or tr:not(:has(th)), but seems less efficient (just a guess)

Demo: http://jsfiddle.net/terryyounghk/Bs2jV/

Reference: http://api.jquery.com/has-selector/

Also, you can add connectWith: 'tbody', just in case you want the rows droppable to any <tbody> within your table.

As in:

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

Please comment on which result you are after. Thanks.