jquery table 分组代码示例

以下是一个基于jQuery实现表格分组的示例代码：

<!-- 引入jQuery和tablesorter插件的CSS和JavaScript文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.bootstrap_4.min.css" integrity="sha512-1RgA3bwn1WcYy8Z9g9dD9tGkZu8yVjz6mR8A7X5Ox7fMlJ7m+uqzj4KK1bQ5fO6J3YTd4RqUQuaieVJlK/ciZg==" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js" integrity="sha512-NxLQZqhOZqJjyf+JzKzY+3jLlFJ8GhXvA6NlXjg3F0bxNqjyf4tWvTETZDTd1nLJX7qLJ1pD0nIttQlZ+uGvaw==" crossorigin="anonymous"></script>

<!-- 在HTML中定义一个表格 -->
<table id="myTable" class="table table-striped">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>23</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>29</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>21</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

<!-- 使用JavaScript代码实现表格分组 -->
<script>
  $(document).ready(function() {
    // 初始化表格排序和分组
    $("#myTable").tablesorter({
      theme: "bootstrap",
      widgets: ["zebra", "group"],
      widgetOptions: {
        group_collapsed: false,
        group_count: " ({num})"
      },
    });
  });
</script>

在这个示例中，我们使用了jQuery和tablesorter插件来实现表格分组功能。我们定义了一个包含姓名、年龄和性别的表格，并在JavaScript代码中通过调用`tablesorter()`方法来初始化表格的分组功能。我们使用了Bootstrap主题和zebra、group插件来实现表格的交互效果和分组功能。我们还通过设置`group_collapsed`和`group_count`等选项来调整分组的默认行为。

除了tablesorter插件外，还有其他的表格分组插件可供选择，例如jQuery-TableDnD、jQuery-TreeGrid和jQuery-Treetable等。你可以根据自己的需求选择相应的插件。