根據選項選擇對表進行排序

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>

根據選擇菜單中的“已選擇”選項，我可以過濾該表。 看看我的片段

 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> 

---

現在我也想根據將要顯示的第一列對該表進行排序。
例如：當用戶選擇"Countires, Numbers, Animals"選擇選項時，我想對像這樣的國家/地區后的表格進行排序：

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

內容是動態添加的：但是我為每個列都有一個數組，例如：
countryArray[..]<br>numberArray[..]<br>...
而且我已經可以使用javascript方法.sort()對數組進行排序

現在是我的問題了，我該如何將這些排序更改應用於表？ 列連接當然應該仍然可用。

Answer 1

我設法通過亞歷山大從以下問題的答案中解決了這個問題：
一次排序多個數組 。
我所做的是：由於我從數組中的每一列獲取表內容，因此我只訂購了適當的數組，然后將其他數組調整為該數組。 完成之后，我只是使用innerText方法更新了Table。