Change table columns order

Question

I need to change the order of columns in a table in html / js dynamically, you can tell me how to do it?

Answer 1

Moving columns is not that hard:

You can use this function:

jQuery.moveColumn = function (table, from, to) {
    var rows = jQuery('tr', table);
    var cols;
    rows.each(function() {
        cols = jQuery(this).children('th, td');
        cols.eq(from).detach().insertBefore(cols.eq(to));
    });
}

Then invoke it like so:

var tbl = jQuery('table');
jQuery.moveColumn(tbl, 2, 0);

So, by knowing the index of the column, and the index of where you'd like to put it (zero-based), you can move the columns, including column headings.

Here is the working jsfiddle: http://jsfiddle.net/Qsys7/1/