如何只对表中的几行进行排序？

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. --我将把姓氏作为类添加到给定的person
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>

​