JS / HTML come ordinare la tabella con i subrows fissi

Ho la seguente impostazione della tabella:

table { border-collapse: collapse; } table, th, td { border: 1px solid black; } 
 <table> <thead> <tr> <th>System Name</th> <th>TotalSystemGB</th> <th>Drive</th> <th>Total GB</th> <th>Used GB</th> <th>Free GB</th> </tr> </thead> <tbody> <tr class="mainRow"> <td>System 1</td> <td>1100</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 1</td> <td></td> <td>C:</td> <td>100</td> <td>50</td> <td>50</td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 1</td> <td></td> <td>D:</td> <td>1000</td> <td>750</td> <td>250</td> </tr> <tr class="mainRow"> <td>System 2</td> <td>820</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 2</td> <td></td> <td>C:</td> <td>120</td> <td>70</td> <td>50</td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 2</td> <td></td> <td>D:</td> <td>700</td> <td>500</td> <td>200</td> </tr> <tr class="mainRow"> <td>System 3</td> <td>3080</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 3</td> <td></td> <td>C:</td> <td>80</td> <td>30</td> <td>50</td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 3</td> <td></td> <td>D:</td> <td>1000</td> <td>750</td> <td>250</td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 3</td> <td></td> <td>E:</td> <td>2000</td> <td>1500</td> <td>500</td> </tr> </tbody </table> 

Vorrei avere il seguente comportmento:

  • Quando l'sorting su "Nome di sistema" e "TotalSystemGB" solo i dati vengono ordinati in base ai mainRows ma i sottotitoli rimangono collegati correttamente.
  • Quando l'sorting su totale, usato o libero GB i sottotitoli vengono ordinati solo all'interno dei mainRows.

Attualmente utilizzo il sorteggio ma non vedo un modo per farlo funzionare nel modo in cui lo voglio, specialmente per quanto riguarda il mantenimento dei sottotitoli collegati ai mainRows.

C'è un modo intelligente per risolvere questo problema?

Per ordinare le righe principali, è necessario trovare i mainRows ei relativi sottoprogrammi, quindi fondamentalmente li appendono appropriati.

Per le righe secondarie, è necessario anche trovare i mainRows, ma li aggiungerli solo dopo il loro mainRow corrispondente.

 var last_column; function get_mains() { var mains = document.querySelectorAll(".mainRow"); var mains_arrays = [] mains.forEach( item => mains_arrays.push(item) ); return mains_arrays; } function order_mains(column) { var mains_arrays = get_mains(); var table = document.getElementById("body"); mains_arrays.sort( function (a, b) { let a_text = a.querySelectorAll("td")[column].innerText; let b_text = b.querySelectorAll("td")[column].innerText; let truthy; if (column) { return +a_text < +b_text; } else { return a_text.localeCompare(b_text); } }); if (last_column === column) { mains_arrays.reverse(); } for (let item of mains_arrays) { var siblings = []; var sibling = item.nextElementSibling; table.appendChild(item); do { if (sibling.className === "mainRow") { break; } siblings.push(sibling); } while ( sibling = sibling.nextElementSibling); for (let sib of siblings) { table.appendChild(sib); } } last_column = (last_column === column) ? -1 : column; } function order_subs(column) { var mains_arrays = get_mains(); var tbody = document.getElementById("body"); for (let item of mains_arrays) { var siblings = []; var sibling = item.nextElementSibling; do { if (sibling.className === "mainRow") { break; } siblings.push(sibling); } while ( sibling = sibling.nextElementSibling); siblings.sort( function (a, b) { let a_text = a.querySelectorAll("td")[column].innerText; let b_text = b.querySelectorAll("td")[column].innerText; return +a_text < +b_text; }); if (last_column === column) { siblings.reverse(); } for (let sib of siblings) { body.insertBefore(sib, item.nextElementSibling); } } last_column = (last_column === column) ? -1 : column; } 
 table { border-collapse: collapse; } table, th, td { border: 1px solid black; } 
 <table id="the_table"> <thead> <tr> <th onclick="order_mains(0)">System Name</th> <th onclick="order_mains(1)">TotalSystemGB</th> <th>Drive</th> <th onclick="order_subs(3)">Total GB</th> <th onclick="order_subs(4)">Used GB</th> <th onclick="order_subs(5)">Free GB</th> </tr> </thead> <tbody id="body"> <tr class="mainRow"> <td>System 1</td> <td>1100</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 1</td> <td></td> <td>C:</td> <td>100</td> <td>50</td> <td>50</td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 1</td> <td></td> <td>D:</td> <td>1000</td> <td>750</td> <td>250</td> </tr> <tr class="mainRow"> <td>System 3</td> <td>820</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 3</td> <td></td> <td>C:</td> <td>120</td> <td>70</td> <td>50</td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 3</td> <td></td> <td>D:</td> <td>700</td> <td>500</td> <td>200</td> </tr> <tr class="mainRow"> <td>System 2</td> <td>3080</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 2</td> <td></td> <td>C:</td> <td>80</td> <td>30</td> <td>50</td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 2</td> <td></td> <td>D:</td> <td>1000</td> <td>750</td> <td>250</td> </tr> <tr class="subRow"> <td>&nbsp;&nbsp;&nbsp;&nbsp;System 2</td> <td></td> <td>E:</td> <td>2000</td> <td>1500</td> <td>500</td> </tr> </tbody> </table>