Question

美好的一天，所以我有一个 jquery mobile 页面：

<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

我设法通过此问题的Alexander答案解决了这个问题：
Sorting multiple arrays at once。
我所做的是：由于我从数组中的每一列获得了Table内容，我只需订购相应的数组并将其他数组调整到它。完成之后，我只需使用innerText方法更新我的表。

根据选项选择对表进行排序

1 个答案: