Question

我试图制作一个可控的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行。我认为这不是一个好的解决方案。

Answer 1

你可以使用它;

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

之前

Answer 2

下面的函数将构建一个hashmap，根据所选颜色对select元素的ID进行分组。您可以使用该hashmap来渲染表，但是您可以使用它。

请参阅以下工作演示：

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"]}

jQuery - 动态地命令html表行，而不是使用ui-sortable

2 个答案: