Change table columns order via jQuery

When you have a table which you can’t edit, you think you can’t do anything with it. It may be a result of an outside procedure or web-service (usually it returns data in XML, but html-table also can be).

So, for example, we have a list of Borussia Dortmund players. We know id in list, Name of player, his Lastname and date of birth (Figure  1).

Figure 1. Table for change columns order

It’s code is:

<table border=0 cellspacing=0 cellpadding=0 class="tbl">
 <tr>
   <th>#</th>
   <th>Name</th>
   <th>Lastname</th>
   <th>Age</th>
 </tr>

 <tr>
   <td>1</td>
   <td>Roman </td>
   <td>Weidenfeller</td>
   <td>06/08/80</td>
 </tr>

 <tr>
   <td>2</td>
   <td>Neven</td>
   <td>Subotic</td>
   <td>10/12/88</td>
 </tr>
  <tr>
   <td>3</td>
   <td>Mats</td>
   <td>Hummels</td>
   <td>16/12/88</td>
 </tr>

 <tr>
   <td>4</td>
   <td></td>
   <td>Sokratis</td>
   <td>09/06/88</td>
 </tr>
</table>

This table is returned for us by a web service. And we want to insert in on our webpage, but we want column "Age" to be the second.

Figure 2. Table with changed columns order

I see two ways to do it. The first is to write a parser of the text on PHP or C#, parse this text and get modified html code. For this way we need to execute a tools for parsing. May be in this case it’s not so difficult, but you don’t always have an opportunity to use this way.

The second way is (I think) much easier – using some JavaScript with jQuery. Using jQuery in nowadays sites is a common thing.  By the statistic in 2012 about 65% of sites used jQuery. I think that in 2013 this number became more.

So, we need to write a small function for changing order of table columns. We need not to forget that table has and "td", and "th" tags.

<script type="text/javascript">
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));
    });
}
</script>

To call this function we need to write strings like this:

	var tbl = jQuery('.tbl');
	jQuery.moveColumn(tbl, 3, 1);

For automatic changing columns order of table you need to write:

<script type="text/javascript">
$(document).ready(function() {
	var tbl = jQuery('.tbl');
	jQuery.moveColumn(tbl, 3, 1);
});
</script>

For changing columns order of table on button click you need to add some extra code. Let’s insert a button on a page with id="srt" and add some code to call our function. The result is here:

<script type="text/javascript">
$(document).ready(function() {
$('#srt').click(function() {

	var tbl = jQuery('.tbl');
	jQuery.moveColumn(tbl, 3, 1);
});
});
</script>

<input type="Button" id="srt" value="columns" />