Move Td Element And Reorder With Jquery

I have been trying to reorder table elements to set a new order. What I thought would work with grabbing the tr wont work since it grabs the entire piece being moved, including th

Solution 1:

You can use before to move the one row before the other.

$(this).closest('tr').before(rowFirstChoice);

Then to re-number, you can use text with a function to set the value:

$('#customList > tbody > tr > td:first-child').text(function(i){
    return i + 1;
});

http://jsfiddle.net/ndsumonu/11/

Solution 2:

Seems you want to do something like this:

$(document).ready(function() {
    var rowFirstChoice;
    var rowSecondChoice;
    $('.trigger').click(function () {
        if(rowFirstChoice==undefined) {            
            $('.trigger').text('HERE');            
            this.innerHTML = "MOVE";
            rowFirstChoice = $(this).parent().siblings().find("> input");
        } elseif (rowSecondChoice==undefined) {            
            rowSecondChoice = $(this).parent().siblings().find("input");        

            var firstValue = rowFirstChoice.val();
            rowFirstChoice.val(rowSecondChoice.val());
            rowSecondChoice.val(firstValue);

            $('.trigger').text('MOVE');
            rowFirstChoice = undefined;
            rowSecondChoice = undefined;
        }
    });
});

This will swap the values of the inputs, thus maintaining order numbers and ids in place.

Check it out here: JSFiddle