Question

我在具有子功能（described here）的项目中使用表排序器。

这是我的代码：

$(function() {
  $('table').tablesorter();
});

td,
th {
  border: solid 2px #121E23
}

table {
  border-collapse: collapse;
}

thead {
  background-color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>this is column 1</th>
        <th>this is column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th colspan="4">TITLE 1</th>
      </tr>
      <tr class="tablesorter-childRow">
        <td>abc</td>
        <td>yolo</td>
      </tr>
      <tr class="tablesorter-childRow">
        <td>def</td>
        <td>yolo</td>
      </tr>
      <tr>
        <th colspan="4">TITLE 2</th>
      </tr>
      <tr class="tablesorter-childRow">
        <td>test1</td>
        <td>yolo</td>
      </tr>
      <tr class="tablesorter-childRow">
        <td>test2</td>
        <td>yolo</td>
      </tr>
    </tbody>
  </table>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.combined.min.js"></script>
</body>

</html>

默认情况下，我们有这个：

如果我们更改第一列的排序顺序（通过单击它），则会得到以下信息：

仅是因为表排序器对父行（TITLE 1和TITLE 2）进行了排序，并以与开始时相同的顺序保留了子行。但是我希望tablesorter也可以对子行进行排序，这样就可以得到我的表：

我该怎么做？感谢您的帮助。

tablesorter-如何对子行和父行进行排序

0 个答案: