Javascript jQuery-动态排序html表行，不使用ui排序表

我正在尝试创建一个可控制的html表列表

我的清单如下：

<table>
    <tr id="selection_18">
        <td>
            <select id="colors_18">
                <option value="0">All</option>
                <option value="1">Red</option>
                <option value="2">Yellow</option>
            </select>
        </td>
    </tr>
    <tr id="selection_27">
        <td>
            <select id="colors_27">
                <option value="0">All</option>
                <option value="1">Red</option>
                <option value="2">Yellow</option>
            </select>
        </td>
    </tr>
    <tr id="selection_5">
        <td>
            <select id="colors_5">
                <option value="0">All</option>
                <option value="1">Red</option>
                <option value="2">Yellow</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <button onclick="orderRows();" />
        </td>
    </tr>
</table>

全部的
红色
黄色的
全部的
红色
黄色的
全部的
红色
黄色的

场景是这样的：例如，用户选择所有颜色

第一行他选择红色，第二行他选择黄色，第三行他再次选择红色。。。第九十排他选择了黄色

用户希望再次按颜色对所有行进行排序，以查看选择哪种颜色的次数

---

我应该在javascript函数

orderRows（）

中编写什么。我可以使用jQuery，但不想使用jQuery UI sortable。因为在我的一些列表中，它有400行。我认为这不是一个好的解决方案。

下面的函数将构建一个hashmap，根据所选颜色对所选元素的ID进行分组。可以使用该hashmap以任何方式呈现表

请参阅以下网址的工作演示：

JS:

添加了HTML（注意按钮已从表中拉出）：

你可以用这个

$("#order").on("click", function() {
    $('tr').sort(function(a, b){
      return $(a).find("option:selected").text() > $(b).find("option:selected").text();
    }).appendTo('table')    
});

$("#order").appendTo("table"); // this is for keep button place

这是一个工作演示：

在演示中，您可以选择颜色，然后单击“顺序”按钮。下单后，您可以再次选择颜色，然后单击下单洗牌

---

注意：

a

和

b

在函数中是指每次迭代的两个特定元素

n

和

n+1

。这意味着，它是比较每个迭代的第n个和（n+1）个元素。如果n>n+1元素，n保持不变，如果不是，n+1在n之前移动位置

不排序颜色，按行中选定的颜色val排序行这并不重要。我想排成红，红，红，黄，黄，黄，而不是红，黄，红，红，黄，红。红色可以是第一个也可以是最后一个，这没关系…@AndroCoder你可以用一个简单的代码来做到这一点。您可以使用现有的表，而无需使用外部hashmap来呈现表。请参阅我的回答如何使用此HashMap呈现表您拥有按所选颜色分组ID的JSON。迭代JSON并“排序”项目。当您说“order rows”时，并不是100%清楚您想要做什么。在示例中，trs的默认顺序是：selection_18>selection_27>selection_5。用户选择颜色18红色，颜色27黄色，颜色5红色。然后按下按钮。我想看看表格选择Syp18.>选择5>选择S27。所以，你想重新选择桌子的颜色选择？胡因兹？Bir dökümantasyon var mıdırTürk mıktın:）a sıb sişu demek。Elide 3 eleman变量x，y，z。İlk iterasyonda a=x，b=y ikinci iterasyonda a=y，b=z oluyor。亚尼河流域+1卡拉蒂尔普汉吉斯比尔斯特塔尤尔孙河流域（karştırıp hangisi büyükse birüste taşyorsun）。对于新用户，请参见我答案中关于

a

和

b

的详细信息

<div>
    <button onclick="orderRows()">orderRows</button>
</div>
<div id="display">
</div>

{"Red":["colors_18","colors_5"],"Yellow":["colors_27"]}

$("#order").on("click", function() {
    $('tr').sort(function(a, b){
      return $(a).find("option:selected").text() > $(b).find("option:selected").text();
    }).appendTo('table')    
});

$("#order").appendTo("table"); // this is for keep button place