javascript - 对子行数据进行排序并将父级与子组一起移动

Question

我有这样的表：

<table>
    <tr class="parent">
        <th id="apple">Apple</th>
        <th id="orange">Orange</th>
        <th>Banana</th>
    </tr>
    <tr class="parent">
        <td>Apple</td>
        <td>Orange</td>
        <td>Banana</td>
    </tr>
    <tr class="child">
        <td>Apple 1</td>
        <td>Orange 1</td>
        <td>Banana 1</td>
    </tr>
    <tr class="child">
        <td>Apple 2</td>
        <td>Orange 2</td>
        <td>Banana 2</td>
    </tr>
    <tr class="parent">
        <td>Table</td>
        <td>cHAIR</td>
        <td>Mouse</td>
    </tr>
    <tr class="child">
        <td>Table 1</td>
        <td>cHAIR 1</td>
        <td>Mouse 1</td>
    </tr>
    <tr class="child">
        <td>Table 2</td>
        <td>cHAIR 2</td>
        <td>Mouse 2</td>
    </tr>
</table>

我只想对子行数据进行排序，<th>并将父 tr 与子 tr 一起移动。我无法做到这一点，因为它只有一张桌子。

我目前使用的代码是：demo of code

Answer 1

我想我现在明白你想要什么了。我认为您想通过使用父级对组进行排序，并对组内的子级进行排序。

$('th').click(function() {
    //remove and group
    var groups = [];
    $(this).parent().siblings().each(function() {
        $(this).detach();
        if($(this).hasClass('parent')) {
            groups.push({parent:$(this), children:[]});
        } else {
            groups[groups.length-1].children.push($(this));
        }
    });

    //sort, inter-group, and intra-group
    var i = $(this).index();
    function compareRows(rowA, rowB) {
        var a = $(rowA.children()[i]).text();
        var b = $(rowB.children()[i]).text();
        return a < b ? -1 : a > b ? 1 : 0;
    }
    groups.sort(function(groupA, groupB) {
        return compareRows(groupA.parent, groupB.parent);
    });
    $.each(groups, function(_, group) {
        group.children.sort(compareRows);
    });

    //reinsert
    var table = $(this).parent().parent();
    $.each(groups, function(_, group) {
        table.append(group.parent).append(group.children);
    });
});

请澄清你的意图是否是其他的。