how to sort a table with child rows based on a column in the parent rows in jQuery-CodePudding

The

Fix:

$(document).ready(function() { // This section for Collapse/Expand feature to hide/unhide child rows $('#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'); } }); }); // !!!!!!the issue starts here // This section is for sorting the parents row based on Grand Total column from highest to lowest // get rows as array and detach them from the table var rows = $('#pool tr.accountLevelLine').detach(); let innerRows = $('#pool tr.pool-items').detach(); // sort the parents rows by number in the td with class "GrandTotal" rows.sort(function (row1, row2) { return parseInt($(row1).find('td.GrandTotal').text()) - parseInt($(row2).find('td.GrandTotal').text()); }); // add each row back to the table in the sorted order rows.each(function () { $(this).appendTo('#pool'); let that = $(this); innerRows.each(function() { if ($(this).hasClass(that.find('td:first').data('target').substring(1))) $(this).appendTo('#pool'); }); }); });

table, th, td { border: 1px solid; } .collapsed { cursor: pointer; } .hidden { display:none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="pool"> <thead> <tr > <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 > <td data-toggle="collapse" data-target=".idAccountantGeneral">►</td> <td >Accountant General</td> <td ></td> <td ></td> <td >1300000</td> <td ></td> <td ></td> <td >1300000</td> </tr> <tr > <td class='pool-items-side'></td> <td >OPP-0000733349</td> <td ></td> <td ></td> <td >1300000</td> <td ></td> <td ></td> <td >1300000</td> </tr> <tr > <td data-toggle="collapse" data-target=".idAenaSmeSa">►</td> <td >Aena S.m.e. Sa.</td> <td ></td> <td >6059994</td> <td ></td> <td ></td> <td ></td> <td >6059994</td> </tr> <tr > <td class='pool-items-side'></td> <td >OPP-0000759948</td> <td ></td> <td >1009999</td> <td ></td> <td ></td> <td ></td> <td >1009999</td> </tr> <tr > <td class='pool-items-side'></td> <td >OPP-0000897454</td> <td ></td> <td >5049995</td> <td ></td> <td ></td> <td ></td> <td >5049995</td> </tr> <tr > <td data-toggle="collapse" data-target=".idAdyenNv">►</td> <td >Adyen N.v.</td> <td ></td> <td >2575497</td> <td >20199980</td> <td ></td> <td ></td> <td >22775477</td> </tr> <tr > <td class='pool-items-side'></td> <td >OPP-0000778343</td> <td ></td> <td >2575497</td> <td ></td> <td ></td> <td ></td> <td >2575497</td> </tr> <tr > <td class='pool-items-side'></td> <td >OPP-0000872048</td> <td ></td> <td ></td> <td >20199980</td> <td ></td> <td ></td> <td >20199980</td> </tr> <tr > <td data-toggle="collapse" data-target=".idAllianzDeutschlandAg">►</td> <td >Allianz Deutschland Ag</td> <td ></td> <td ></td> <td >4039996</td> <td >19240481</td> <td ></td> <td >23280477</td> </tr> <tr > <td class='pool-items-side'></td> <td >OPP-0000764304</td> <td ></td> <td ></td> <td ></td> <td >19240481</td> <td ></td> <td >19240481</td> </tr> <tr > <td class='pool-items-side'></td> <td >OPP-0000818151</td> <td ></td> <td ></td> <td >4039996</td> <td ></td> <td ></td> <td >4039996</td> </tr> <tr > <td data-toggle="collapse" data-target=".idAmadeusDataProcessingGmbh">►</td> <td >Amadeus Data Processing Gmbh</td> <td ></td> <td >1009999</td> <td ></td> <td ></td> <td ></td> <td >1009999</td> </tr> <tr > <td class='pool-items-side'></td> <td >OPP-0000839743</td> <td ></td> <td >1009999</td> <td ></td> <td ></td> <td ></td> <td >1009999</td> </tr> </tbody> </table>

Explanation:

we sort all rows, including the first

we detach the inner rows as well and append them after their parent is appended