如何在不對特定行進行排序的同時對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>