解决jQuery中带子行表格按父行Grand Total列排序后子行错位问题

云上老周

2026-8-13

问题原因

你只单独提取了.accountLevelLine父行进行排序，对应的子行未被移动，仍留在原位置。父行重新插入表格后，子行与父行的位置对应关系被破坏，导致展开/折叠时无法匹配到正确的子行。

修复方案

需要将父行+其关联子行作为一个整体排序，确保排序后父行和子行仍保持绑定关系：

遍历所有父行，为每个父行收集其后续所有属于它的子行（直到下一个父行），形成行组。
基于父行的GrandTotal数值对行组进行降序排序。
清空表格tbody，将排序后的行组依次重新插入。

修改后的完整代码

JavaScript

$(document).ready(function() {
    // 折叠/展开功能
    $('#pool').on('click', 'tbody > tr > .collapsed', function() {
        const collapsed = $(this);
        const accountName = $(this).siblings('.AccountName').text().replace(/[^a-z0-9]/gi, '');
        const trItem = $(this).parents('tr').siblings('.id' + accountName);
        
        trItem.each(function() {
            if($(this).hasClass("hidden")) {
                collapsed.text('▼');
                $(this).removeClass('hidden');
            } else {
                collapsed.text('►');
                $(this).addClass('hidden');
            }
        });
    });

    // 排序父行+子行整体
    const tbody = $('#pool tbody');
    // 收集所有父行
    const parentRows = tbody.find('tr.accountLevelLine');
    const rowGroups = [];

    // 为每个父行创建包含子行的组
    parentRows.each(function(index) {
        const parent = $(this);
        const group = [parent];
        // 获取当前父行之后的所有行，直到下一个父行
        let nextRow = parent.next();
        while (nextRow.length && !nextRow.hasClass('accountLevelLine')) {
            group.push(nextRow);
            nextRow = nextRow.next();
        }
        rowGroups.push(group);
    });

    // 按父行的GrandTotal降序排序行组
    rowGroups.sort(function(groupA, groupB) {
        const totalA = parseInt(groupA[0].find('td.GrandTotal').text());
        const totalB = parseInt(groupB[0].find('td.GrandTotal').text());
        // 降序排序，所以用totalB - totalA
        return totalB - totalA;
    });

    // 清空tbody并重新插入排序后的行组
    tbody.empty();
    rowGroups.forEach(function(group) {
        group.forEach(function(row) {
            tbody.append(row);
        });
    });
});

CSS

table, th, td {
    border: 1px solid;
}

.collapsed {
    cursor: pointer;
}

.hidden {
    display:none;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="nowrap table table-hover table-bordered" id="pool">
<thead>
<tr class="collapsed">
<th></th>
<th>Account Name</th><th>0</th><th>5</th><th>25</th><th>50</th><th>80</th><th>Grand Total</th>   
</tr>
</thead>
<tbody>
<tr class="accountLevelLine">
<td class="collapsed" data-toggle="collapse" data-target=".idAccountantGeneral">►</td>
<td class="AccountName">Accountant General</td>
<td class="0"></td>
<td class="5"></td>
<td class="25">1300000</td>
<td class="50"></td>
<td class="80"></td>
<td class="GrandTotal">1300000</td>
</tr>
<tr class="pool-items collapse hidden idAccountantGeneral">
<td class='pool-items-side'></td>
<td class="OpportunityRef">OPP-0000733349</td>
<td class="0"></td>
<td class="5"></td>
<td class="25">1300000</td>
<td class="50"></td>
<td class="80"></td>
<td class="GrandTotal">1300000</td>
</tr>
<tr class="accountLevelLine">
<td class="collapsed" data-toggle="collapse" data-target=".idAenaSmeSa">►</td>
<td class="AccountName">Aena S.m.e. Sa.</td>
<td class="0"></td>
<td class="5">6059994</td>
<td class="25"></td>
<td class="50"></td>
<td class="80"></td>
<td class="GrandTotal">6059994</td>
</tr>
<tr class="pool-items collapse hidden idAenaSmeSa">
<td class='pool-items-side'></td>
<td class="OpportunityRef">OPP-0000759948</td>
<td class="0"></td>
<td class="5">1009999</td>
<td class="25"></td>
<td class="50"></td>
<td class="80"></td>
<td class="GrandTotal">1009999</td>
</tr>
<tr class="pool-items collapse hidden idAenaSmeSa">
<td class='pool-items-side'></td>
<td class="OpportunityRef">OPP-0000897454</td>
<td class="0"></td>
<td class="5">5049995</td>
<td class="25"></td>
<td class="50"></td>
<td class="80"></td>
<td class="GrandTotal">5049995</td>
</tr>
<tr class="accountLevelLine">
<td class="collapsed" data-toggle="collapse" data-target=".idAdyenNv">►</td>
<td class="AccountName">Adyen N.v.</td>
<td class="0"></td>
<td class="5">2575497</td>
<td class="25">20199980</td>
<td class="50"></td>
<td class="80"></td>
<td class="GrandTotal">22775477</td>
</tr>
<tr class="pool-items collapse hidden idAdyenNv">
<td class='pool-items-side'></td>
<td class="OpportunityRef">OPP-0000778343</td>
<td class="0"></td>
<td class="5">2575497</td>
<td class="25"></td>
<td class="50"></td>
<td class="80"></td>
<td class="GrandTotal">2575497</td>
</tr>
<tr class="pool-items collapse hidden idAdyenNv">
<td class='pool-items-side'></td>
<td class="OpportunityRef">OPP-0000872048</td>
<td class="0"></td>
<td class="5"></td>
<td class="25">20199980</td>
<td class="50"></td>
<td class="80"></td>
<td class="GrandTotal">20199980</td>
</tr>
<tr class="accountLevelLine">
<td class="collapsed" data-toggle="collapse" data-target=".idAllianzDeutschlandAg">►</td>
<td class="AccountName">Allianz Deutschland Ag</td>
<td class="0"></td>
<td class="5"></td>
<td class="25">4039996</td>
<td class="50">19240481</td>
<td class="80"></td>
<td class="GrandTotal">23280477</td>
</tr>
<tr class="pool-items collapse hidden idAllianzDeutschlandAg">
<td class='pool-items-side'></td>
<td class="OpportunityRef">OPP-0000764304</td>
<td class="0"></td>
<td class="5"></td>
<td class="25"></td>
<td class="50">19240481</td>
<td class="80"></td>
<td class="GrandTotal">19240481</td>
</tr>
<tr class="pool-items collapse hidden idAllianzDeutschlandAg">
<td class='pool-items-side'></td>
<td class="OpportunityRef">OPP-0000818151</td>
<td class="0"></td>
<td class="5"></td>
<td class="25">4039996</td>
<td class="50"></td>
<td class="80"></td>
<td class="GrandTotal">4039996</td>
</tr>
<tr class="accountLevelLine">
<td class="collapsed" data-toggle="collapse" data-target=".idAmadeusDataProcessingGmbh">►</td>
<td class="AccountName">Amadeus Data Processing Gmbh</td>
<td class="0"></td>
<td class="5">1009999</td>
<td class="25"></td>
<td class="50"></td>
<td class="80"></td>
<td class="GrandTotal">1009999</td>
</tr>
<tr class="pool-items collapse hidden idAmadeusDataProcessingGmbh">
<td class='pool-items-side'></td>
<td class="OpportunityRef">OPP-0000839743</td>
<td class="0"></td>
<td class="5">1009999</td>
<td class="25"></td>
<td class="50"></td>
<td class="80"></td>
<td class="GrandTotal">1009999</td>
</tr>
</tbody>
</table>

内容的提问来源于stack exchange，提问作者DevTN

解决jQuery中带子行表格按父行Grand Total列排序后子行错位问题

JavaScript #

CSS #

HTML #

JavaScript

CSS

HTML