Question

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 programmed up and down, back and forward. I just need a solution to move the column position in javascript or in jquery. Thanks.

Answer 1

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>