Re-ordering the columns in a HTML Table using jquery

Question

There is a html table in this fiddle which is created as

<table width="100%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>Sl.No</th>
        <th>Name</th>
        <th>Dec 2013</th>
        <th>Feb 2014</th>
        <th>Jan 2014</th>
        <th>Mar 2014</th>
        <th>Nov 2013</th>
        <th>Total</th>
    </tr>
    <tr>
        <td>1</td>
        <td>foo</td>
        <td>4</td>
        <td>7</td>
        <td>3</td>
        <td>5</td>
        <td>2</td>
        <td>21</td>
    </tr>
    <tr>
        <td>2</td>
        <td>bar</td>
        <td>6</td>
        <td>1</td>
        <td>5</td>
        <td>8</td>
        <td>3</td>
        <td>23</td>
    </tr>
</table>

How to re-order the columns using jquery so that the order of the columns in new table becomes Sl.No, Name, Nov 2013, Dec 2013, Jan 2014, Feb 2014, Mar 2014, Total Also the month columns are generated dynamically by server based on date selection (From and To dates)

Answer 1

var arr = $('th').sort(function(a, b) {
   return new Date(a.innerHTML) > new Date(b.innerHTML);
}).map(function() { return this.cellIndex }).get();

$('tr').each(function() {
    $(this.cells).sort(function(a, b) {
        a = $.inArray(a.cellIndex, arr);
        b = $.inArray(b.cellIndex, arr);
        return a > b;
    }).prependTo(this);
});

http://jsfiddle.net/ZR5W7/