jQuery/Javascript - Sort Table Columns Based on Totals Row -

how can sort performed on table columns based on sort of last totals row?

for example, following table structure row titled "total sold %" used sort corresponding columns in value high low. thus, columns shift left or right "total sold %" row sorted 12.42%, 12.64%, 14.73%:

<table class="table table-bordered text-center">   <thead>     <tr>       <th class="text-center">         average       </th>       <th class="text-center">         entry #1       </th>       <th class="text-center">         entry #2       </th>       <th class="text-center">         entry #3       </th>     </tr>   </thead>   <tbody>     <tr>       <th scope="row">         new car total leads       </th>       <td>         251       </td>       <td>         227       </td>       <td>         526       </td>     <tr>       <th scope="row">         appointments shown %       </th>       <td>         61%       </td>       <td>         61%       </td>       <td>         61%       </td>     </tr>     <tr>       <th scope="row">         sold (delivered)       </th>       <td>         28       </td>       <td>         37       </td>       <td>         85       </td>     </tr>     <tr>       <th scope="row">         total sold %       </th>       <td>         12.64%       </td>       <td>         12.42%       </td>       <td>         14.73%       </td>     </tr>   </tbody> </table> 

well, can proceed way:

1. find row r containing data sort , sort data cells. store sorted cells in s
2. on each rows r, sort each data cells c in s
   1. find index of c in r. i
   2. find cell c @ r[i]
   3. get position of c in s. our target index in array, sort it
3. append each cell in order row. replace cells @ right position

this code broken, please see below

$('#sort').click(sort);    function sort() {    var $table = $('table'),      $sorted = $table.find('tbody tr').last().children().slice(1).sort(function(a, b) {        return parsefloat(a.textcontent) - parsefloat(b.textcontent)      });    $table.find('tr').each(function() {      var $row = $(this);      $row.children().slice(1).sort(function(a, b) {        return $sorted.eq($(a).index() - 1).index() - $sorted.eq($(b).index() - 1).index();      }).each(function() {        $row.append(this);      });    });  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="sort">    sort  </button>  <table class="table table-bordered text-center">    <thead>      <tr>        <th class="text-center">          average        </th>        <th class="text-center">          entry #1        </th>        <th class="text-center">          entry #2        </th>        <th class="text-center">          entry #3        </th>      </tr>    </thead>    <tbody>      <tr>        <th scope="row">          new car total leads        </th>        <td>          251        </td>        <td>          227        </td>        <td>          526        </td>        <tr>          <th scope="row">            appointments shown %          </th>          <td>            61%          </td>          <td>            61%          </td>          <td>            61%          </td>        </tr>        <tr>          <th scope="row">            sold (delivered)          </th>          <td>            28          </td>          <td>            37          </td>          <td>            85          </td>        </tr>        <tr>          <th scope="row">            total sold %          </th>          <td>            12.64%          </td>          <td>            12.42%          </td>          <td>            14.73%          </td>        </tr>    </tbody>  </table>

of course, 1 of possible solution, , not faster one. otherwise, try parse table in array (rows) of arrays (cells), sort, reinsert table. avoid many jquery calls, rather slow & memory consuming

---

edit: above code won't work in situations, because omitted javascript sort algorithm assumes elements moved after execution of inner function, indexes changes @ each iteration. previous code didn't that, not work.

here fixed version

$('#sort').click(sort);    function sort() {var left_rows = 1,      $table = $('table'),      $sorted = $table.find('tbody tr').last().children().slice(left_rows);    $sorted = $sorted.sort(function(a, b) {      return parsefloat(a.textcontent) - parsefloat(b.textcontent);    });    $table.find('tr').each(function() {      var $row = $(this),        $rowcontent = $row.children().slice(left_rows);      $rowcontent.toarray().map(function(t) {        return $sorted.eq($(t).index() - left_rows).index() - left_rows      }).sort(function(a, b) {        var diff = - b;      }).foreach(function(i) {        $row.append($rowcontent.eq(i));      });    });  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="sort">    sort  </button>  <table class="table table-bordered text-center">    <thead>      <tr>        <th class="text-center">          average        </th>        <th class="text-center">          entry #1        </th>        <th class="text-center">          entry #2        </th>        <th class="text-center">          entry #3        </th>      </tr>    </thead>    <tbody>      <tr>        <th scope="row">          new car total leads        </th>        <td>          251        </td>        <td>          227        </td>        <td>          526        </td>        <tr>          <th scope="row">            appointments shown %          </th>          <td>            61%          </td>          <td>            61%          </td>          <td>            61%          </td>        </tr>        <tr>          <th scope="row">            sold (delivered)          </th>          <td>            28          </td>          <td>            37          </td>          <td>            85          </td>        </tr>        <tr>          <th scope="row">            total sold %          </th>          <td>            12.64%          </td>          <td>            12.42%          </td>          <td>            14.73%          </td>        </tr>    </tbody>  </table>