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

Sort child row data and move parent along with child group

本文关键字：数据 移动 一起 排序      更新时间：2023-09-26

我有这样的表格：

<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 一起移动。我无法做到这一点，因为它只有一个表。

我目前使用的代码是：代码演示

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

$('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);
    });
});

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

相关文章：