javascript - 如何仅对表的某些行进行排序？

Question

我有一个下表:

我想对包含姓名和年龄的行及其文章进行排序 -> 我的排序 JavaScript 代码如下所示:

现在它会将名称和文章奇怪地排序在一起。我的想法是以某种方式将嵌套行连接到原始行，以便它将与其原始行一起排序(移动)，但我不确定如何做到这一点。
我该如何处理它？<​​/p>

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>