如何在不对特定行进行排序的同时对html表进行排序？

Question

我有一个html表，它有一个头，应该是可点击的，以排序点击列上的行。这里棘手的部分是，表中有一些行不应该排序，并且属于该特定行的行应保留在该行下面。这里是一些代码，所以你可以得到我正在谈论的内容。

<table> 
    <thead> 
     <tr> 
      <th>User</th> 
      <th>Item</th> 
      <th>Price</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th colspan="5" style="text-align:left;">Peter</th> 
     </tr> 
     <tr> 
      <td></td> 
      <td>Apple</td> 
      <td>10</td> 

     </tr> 
     <tr> 
      <td></td> 
      <td>Pineapple</td> 
      <td>15</td> 

     </tr> 
     <tr> 
      <th colspan="5" style="text-align:left;">Stan</th> 
     </tr> 
     <tr> 
      <td></td> 
      <td>Banana</td> 
      <td>7</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>Orange</td> 
      <td>10</td> 
     </tr> 
    </tbody> 
</table> 

所以，如果我点击例如在项目标头，苹果+菠萝行应该保持彼得和斯坦行同时进行排序之间。如果我点击用户标题，彼得和斯坦应该排序，而项目苹果+菠萝留在彼得一行下，香蕉和橙子项目仍然在斯坦列下......我希望你明白我的意思。 我已经尝试过与jquery tablesorter-plugin，但我找不到任何解决方案为我工作。

Answer 1

您需要将每个行块包含在单独的tbody中。

然后点击User将只有tbody有几分，并点击其他th旨意每个tbody分别排序。

编辑

表应该是这样的：

<table> 
    <thead> 
    <tr> 
     <th>User</th> 
     <th>Item</th> 
     <th>Price</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <th colspan="5" style="text-align:left;">Peter</th> 
    </tr> 
    <tr> 
     <td></td> 
     <td>Apple</td> 
     <td>10</td> 

    </tr> 
    <tr> 
     <td></td> 
     <td>Pineapple</td> 
     <td>15</td> 

    </tr> 
    </tbody> 
    <tbody> 
    <tr> 
     <th colspan="5" style="text-align:left;">Stan</th> 
    </tr> 
    <tr> 
     <td></td> 
     <td>Banana</td> 
     <td>7</td> 
    </tr> 
    <tr> 
     <td></td> 
     <td>Orange</td> 
     <td>10</td> 
    </tr> 
    </tbody>