jQuery sortable with effect on table rows corrupting table

Question

First post here, go easy on me :) I've looked all over and can't seem to figure out whats going on here. A little help would be appreciated.

I'm trying to make table rows sortable using jQuery, which I've accomplished already (see link to the fiddle below). However, when I try to add a highlight effect on the row after the row has been released, it seems to add an additional table data cell () containing an ID. Can anyone explain why this is happening, and how to fix it? It seems to happen when I apply effects, as simple drag/drop does not add this extra cell on the row:

$(document).ready(function() {
    $("#draggable").sortable({
        axis: 'y',
        items: '.item',
        stop: function(event, ui){
            ui.item.children('td').effect('highlight', {}, 1000);
        }
    });
});

http://jsfiddle.net/vQSKC/

Thanks!

Answer 1

There is an extra 'td' that is hidden for each 'tr.item'. Sortable seems to unhide that 'td' when you release. If you are needing that id why not add it as a data attribute to the 'tr.item' like:

<tr class='item' data-id='4'>

Then remove the td that is hidden from the rows which seems to solve the issue.