Jquery Sortable With Multiple Tbody

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

Solution 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.