根据选项 select 对 Table 进行排序

Question

大家好，
所以我有一个这样的 jquery 移动 页面：

<div id="testTableDiv" style="overflow-y: auto; height: 250px">
<table class="ui-responsive ui-shadow gk-decorate table-stripe" id="testTable" is="jqm-table" data-role="table">
  <thead>
    <tr>
      <th>Fruits</th>
      <th>Numbers</th>
      <th>Names</th>
      <th>Countries</th>
      <th>Animals</th>
    </tr>
  </thead>
  <tbody>
   .
   .
   content see Fiddle
  </tbody>
</table>
</div>
<select id="selectId">
  <option selected disabled>Choose Sort View</option>
  <option>Names, Animals, Countries</option>
  <option>Numbers, Fruits, Names</option>
  <option>Countries, Numbers, Animales</option>
</select>

根据 select 菜单中的 Selected 选项，我可以过滤 Table。看看我的代码片段

function changeOrder(table, from, to) {
      var rows = jQuery('tr', table);
      var cols;
      rows.each(function () {
        cols = jQuery(this).children('th, td');

        if (to < cols.length)
          cols.eq(from).detach().insertBefore(cols.eq(to));
        else
          cols.eq(from).detach().insertAfter(cols.last());
      });
    }
    
$(document).ready(function() {
$('#testTable').data('origin-table', $('#testTable').html()).text();

  $("body").on("change", "#selectId", function() {

    if ($("#selectId option:selected").text() == "Names, Animals, Countries") {
    
      $('#testTable').html($('#testTable').data('origin-table'));
      var myTable = document.getElementById("testTable");

      changeOrder(myTable,2,0);
      changeOrder(myTable,4,1);
      changeOrder(myTable,4,2);
      
      $('td:nth-child(4),th:nth-child(4)').hide();
   $('td:nth-child(5),th:nth-child(5)').hide();

    }
    if ($("#selectId option:selected").text() == "Numbers, Fruits, Names") {
      $('#testTable').html($('#testTable').data('origin-table'));
      var myTable = document.getElementById("testTable");

      changeOrder(myTable,1,0);
      
      $('td:nth-child(4),th:nth-child(4)').hide();
   $('td:nth-child(5),th:nth-child(5)').hide();
    }
    
     if ($("#selectId option:selected").text() == "Countries, Numbers, Animales") {
      $('#testTable').html($('#testTable').data('origin-table'));
      var myTable = document.getElementById("testTable");

      changeOrder(myTable,3,0);
      changeOrder(myTable,2,1);
      changeOrder(myTable,5,0);
      
      $('td:nth-child(4),th:nth-child(4)').hide();
   $('td:nth-child(5),th:nth-child(5)').hide();
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">

<div id="testTableDiv" style="overflow-y: auto; height: 250px">
<table class="ui-responsive ui-shadow gk-decorate table-stripe" id="testTable" is="jqm-table" data-role="table">
  <thead>
    <tr>
      <th>Fruits</th>
      <th>Numbers</th>
      <th>Names</th>
      <th>Countries</th>
      <th>Animals</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Banana</td>
      <td>2321</td>
      <td>Kate</td>
      <td>France</td>
      <td>Tiger</td>
    </tr>
    <tr>
      <td>Apple</td>
      <td>819</td>
      <td>John</td>
      <td>Mexico</td>
      <td>Dog</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>62</td>
      <td>Jack</td>
      <td>Italy</td>
      <td>Cat</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>728</td>
      <td>James</td>
      <td>Spain</td>
      <td>Lion</td>
    </tr>
    <tr>
      <td>Mango</td>
      <td>11</td>
      <td>Charlie</td>
      <td>Croatia</td>
      <td>Turtle</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>42</td>
      <td>Ben</td>
      <td>Japan</td>
      <td>Bee</td>
    </tr>
  </tbody>
</table>
</div>
<select id="selectId">
  <option selected disabled>Choose Sort View</option>
  <option>Names, Animals, Countries</option>
  <option>Numbers, Fruits, Names</option>
  <option>Countries, Numbers, Animales</option>
</select>

现在我还想根据将要显示的第一列对 Table 进行排序。
例如：当用户 select 看到 "Countires, Numbers, Animals" Select 选项我想在这样的国家之后对 table 进行排序：

Croatia     11     Mango
France      2321   Banana 
Italy       62     Orange
Japan       42     Cherry
Mexico      819    Apple
Spain       728    Banana

内容是动态添加的：但是我的每一列都有一个数组，例如：
countryArray[..]<br>numberArray[..]<br>...
我已经可以使用 javascript 对该数组进行排序方法 .sort()

现在我的问题是如何将这些排序更改应用到我的 table？列连接当然应该仍然可用。

Answer 1

我通过 Alexander from this question here:
Sorting multiple arrays at once 的回答成功解决了这个问题。
我所做的是：因为我从数组中的每一列中获得了 Table 内容，所以我只是简单地订购了适当的数组并调整了其他数组。完成后，我只需使用 innerText 方法更新我的 Table。

根据选项 select 对 Table 进行排序

Sort a Table based on the option select

html

javascript

sorting

jquery

jquery-mobile