Ordering of Columns in html using javascript or jquery

I am facing a problem on getting a solution on Ordering of Columns. I have used many 3rd party libraries like danvk library,jqGrid for dragging the columns. But what i want to do is. I have a div and have five fields in it. {FirstNJame,LastName,Address,Phone,Designation} also having up and down button so that i can move the fields up and down. On the Ok button, I want to have my table order according the order of fields which i have set on that div. so in short, change in thead and tbody, of what kind of order has been set in that div. Ihave p开发者_开发百科rogrammed up and down, back and forward. I just need a solution to move the column position in javascript or in jquery. Thanks.

This should get you going: http://jsfiddle.net/S9ykD/

The code (using jQuery):

var order = [0,2,1,3];

$(function() {
    $("table tr").each(function() {
        var orderedTds = new Array();
        for (var i=0; i<order.length;i++)
          orderedTds[i] = $(this).children("td")[order[i]];
        for (var i=0; i<order.length;i++)
          $(this).append(orderedTds[i]);
    });   

});

this is the sample markup :

<table>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>
    </tr>
    <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
        <td>444</td>
    </tr>
</table>

Just use some js library - I recommend to use Datatables, which is very nice and you can accomplish almost everything and is very cusotmizable. Or use whatever you are used to. Then just handle the click event on the button and send the configuration to the library. This can be done pretty well with Datatables. See fnSort or fnSortListener in the Datatables API doc.