如何只對表格的某些行進行排序？

Question

我有一個下表：

我想用他們的文章對帶有姓名和年齡的行進行排序 -> 我的用於排序的 JavaScript 代碼如下所示：

現在它把名字和文章奇怪地排序在一起。 我的想法是以某種方式將嵌套行連接到原始行，這樣它就會對其原始行進行排序（移動），但我不確定如何去做。
我怎樣才能接近它？

 const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent; const comparer = (idx, asc) => (a, b) => ((v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2) )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx)); document.querySelectorAll('.th-sortable').forEach(th => th.addEventListener('click', (() => { const tbody = document.getElementsByClassName('js-sortable-table').item(0); Array.from(tbody.querySelectorAll('tr:nth-child(n)')) .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc)) .forEach(tr => tbody.appendChild(tr)); })));

 <table> <thead> <tr> <th class="th-sortable" scope="col">Name</th> <th class="th-sortable" scope="col">Surname</th> <th class="th-sortable" scope="col">Age</th> </tr> </thead> <tbody class="js-sortable-table"> <tr> <td> John </td> <td> Carter </td> <td> 44 </td> </tr> <tr class="nested"> <th> Article </th> <th> Topic </th> <th> Date </th> </tr> <tr class="nested"> <td> 4 </td> <td> Music </td> <td> 12.06.2019 </td> </tr> <tr class="nested"> <td> 7 </td> <td> Free-time Activity </td> <td> 12.08.2019 </td> </tr> <tr class="nested"> <td> 8 </td> <td> Hobby </td> <td> 12.09.2019 </td> </tr> <tr> <td> Nicole </td> <td> Odipie </td> <td> 21 </td> </tr> <tr class="nested"> <th> Article </th> <th> Topic </th> <th> Date </th> </tr> <tr class="nested"> <td> 11 </td> <td> Fashion </td> <td> 12.09.2019 </td> </tr> </tbody> </table>

Answer 1

這不是一個完整的解決方案，但應該進行一些修改。

1. 在您的主表中為文章嵌套表

2. 使用 w3 中的此函數對表格進行排序

3. 我會將姓氏作為一個類添加到給定人員的每個嵌套表中

4. 對主表進行排序，然后為每個人嵌入嵌套表（如果需要，在嵌入之前對嵌套表進行排序）

更新：1) 當您獲得主表時，消除嵌套表 2) 獲得每個嵌套表 3) 將嵌套表在排序后重新添加到主表中

如果您需要更多幫助，您需要將一些東西放在一起並制定一個循序漸進的游戲計划。 很容易獲得特定步驟的特定幫助。 您分解的步驟越多，獲得幫助就越容易、越快。

這真的不是那么難（可能很乏味），只是涉及一些基本的 JS 操作。

 function sortTable() { var table, rows, switching, i, x, y, shouldSwitch; table = document.getElementById("myTable"); switching = true; /*Make a loop that will continue until no switching has been done:*/ while (switching) { //start by saying: no switching is done: switching = false; rows = table.rows; /*Loop through all table rows (except the first, which contains table headers):*/ for (i = 1; i < (rows.length - 1); i++) { //start by saying there should be no switching: shouldSwitch = false; /*Get the two elements you want to compare, one from current row and one from the next:*/ x = rows[i].getElementsByTagName("TD")[0]; y = rows[i + 1].getElementsByTagName("TD")[0]; //check if the two rows should switch place: if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch = true; break; } } if (shouldSwitch) { /*If a switch has been marked, make the switch and mark that a switch has been done:*/ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; } } }

 <table> <thead> <tr> <th class="th-sortable" scope="col">Name</th> <th class="th-sortable" scope="col">Surname</th> <th class="th-sortable" scope="col">Age</th> </tr> </thead> <tbody class="js-sortable-table"> <tr> <td> John </td> <td> Carter </td> <td> 44 </td> </tr> <tr class="nested"> <th> Article </th> <th> Topic </th> <th> Date </th> </tr> <tr class="nested"> <td> 4 </td> <td> Music </td> <td> 12.06.2019 </td> </tr> <tr class="nested"> <td> 7 </td> <td> Free-time Activity </td> <td> 12.08.2019 </td> </tr> <tr class="nested"> <td> 8 </td> <td> Hobby </td> <td> 12.09.2019 </td> </tr> <tr> <td> Nicole </td> <td> Odipie </td> <td> 21 </td> </tr> <tr class="nested"> <th> Article </th> <th> Topic </th> <th> Date </th> </tr> <tr class="nested"> <td> 11 </td> <td> Fashion </td> <td> 12.09.2019 </td> </tr> </tbody> </table>