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

jQuery - order html table rows dynamically, not using ui-sortable

本文关键字：ui-sortable 表行 动态 排序 html jQuery      更新时间：2023-09-26

我正在尝试制作一个可控制的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可排序。因为在我的一些列表中，它有 400 行。我认为这不是一个好的解决方案。

你可以使用它;

$("#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

这是一个工作演示：jsfiddle

在演示中，您可以选择颜色，然后单击"订购"按钮。订购后，您可以再次选择颜色并单击顺序进行随机播放。

注意：a 和函数中的b是指每次迭代的特定两个元素n和n+1。这意味着，它正在比较每次迭代的第 n 个和第 （n+1） 个元素。如果 n> n+1 元素，则 n 保持不变，否则，n+1 将位置移动到 n 之前

下面的函数将构建一个哈希图，根据所选颜色对所选元素的 ID 进行分组。您可以使用该哈希图来呈现您想要的表格。

请参阅以下位置的工作演示：

JSFiddle

.JS：

function orderRows(){
    var colorArray = [ 'All', 'Red', 'Yellow' ];
    var colorMap = {};
    $('table select').each(function(){
        var color = colorArray[$(this).val()];
        if( colorMap[color] == undefined ){
            colorMap[color] = [];   
        }
        colorMap[color].push($(this).attr('id'));
    });
    $('div#display').html(JSON.stringify(colorMap));
}

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

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

显示的 JSON 示例：

{"Red":["colors_18","colors_5"],"Yellow":["colors_27"]}
相关文章：