特定の行をソートせずにソート可能な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> 

私はアイテムヘッダーに例えばクリックすると、ソートされながらだから、アップル+パイナップル行がピーターとスタン行の間に残るはずです。 User-HeaderをクリックするとPeterとStanがソートされますが、Apple + PineappleアイテムはPeter行の下に残り、BananaとOrangeアイテムはStan行の下に残ります。 私はすでにjquery tablesorter-pluginで試してみましたが、私のために働いていた解決策は見つかりませんでした。

Answer 1

行の各ブロックを別々のtbodyに囲む必要があります。

次にUserをクリックすると、唯一のtbody Sをソートしますし、他のthのをクリックすると、個別に各tbodyをソートします。

EDIT

表は次のようになります。

<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>