jQuery tablesorter问题 - 用rowspan排序

Question

我在桌子上使用jQuery tablesorter。没有rowspan，表格排序很好，但是当我添加rowspan时，排序会破坏我的表格布局。

以下是一些示例代码：

<table cellspacing="1" class="tablesorter">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>28</td>
      <td rowspan="2" style="vertical-align:middle">AAA</td>
    </tr>
    <tr>
      <td>John</td>
      <td>33</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>18</td>
      <td>BBB</td>
    </tr>

    <tr>
      <td>Bruce</td>
      <td>22</td>
      <td>CCC</td>
    </tr>
  </tbody>
</table>

$(".tablesorter").tablesorter({});    

不点击排序，我的表格如下：

当我点击国家标题时，表格变得非常乱码

Answer 1

一个“简单”的解决方案是使rowspan包含在子行中的所有行：

• 原始的tableorter（demo）

  <tr>
    <td>Peter</td>
    <td>28</td>
    <td rowspan="2" style="vertical-align:middle">AAA</td>
  </tr>
  <tr class="expand-child">
    <td>John</td>
    <td>33</td>
  </tr>
  

  初始化JS

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

• Tablesorter fork（demo） - 在fork中更改了类名

  <tr>
    <td>Peter</td>
    <td>28</td>
    <td rowspan="2" style="vertical-align:middle">AAA</td>
  </tr>
  <tr class="tablesorter-childRow">
    <td>John</td>
    <td>33</td>
  </tr>
  

  初始化JS

  $(function() {
    $('table').tablesorter({
      theme: 'blue'
    });
  });
  

由于rowspan被设置为子行，因此它们不会包含在排序中，也不会用父项切换位置。