sort by row

sorting table by row

HTML

<h4>
Sample
</h4>

<table border="1" id="sample">
<tr><td><b>Name</b></td><td>John</td><td>Jane</td><td>Jack</td></tr>
<tr><td><b>Age</b></td><td>36</td><td>34</td><td>42</td></tr>
<tr><td><b>Weight</b></td><td>75</td><td>56</td><td>82</td></tr>
<tr><td><b>Score</b></td><td>25</td><td>42</td><td>18</td></tr>
</table>

<h4>
Sorted
</h4>

<table border="1" id="sorted">
<tr><td><b>Name</b></td><td>John</td><td>Jane</td><td>Jack</td></tr>
<tr><td><b>Age</b></td><td>36</td><td>34</td><td>42</td></tr>
<tr><td><b>Weight</b></td><td>75</td><td>56</td><td>82</td></tr>
<tr><td><b>Score</b></td><td>25</td><td>42</td><td>18</td></tr>
</table>

CSS

table td{width:100px;}

JavaScript

var indices;

$(document).ready(function(){
  var headings = $('#sorted tr:first td:gt(0)').map(function(item){       
       return $(this).text()
  }).get();
  var sortedHeadings = headings.slice().sort();
  indices =  headings.reduce(function(a,c,i){
     a[i]= sortedHeadings.indexOf(c);
     return a;
  },{})
  $('#sorted tr') .each(function(i){
     var $cols = $(this).children(':gt(0)').sort(function(a,b){
         return indices[$(a).index()]-indices[$(b).index()]
     });
     $(this).append($cols)
  })

	//console.log('Sorting !!');
  
  
});