表：只顯示錶tbody的第一行。如何隱藏後續的第一行？

Question

EVERY tbody的第一行是行標題（包含列名稱）。 其餘的每一個成功的第一行都沒有必要，並且想隱藏它們。使用

類：

：保存每列名

recordsRow =持有其他記錄細節

現在它這樣表示

toprowHeader =第1行

-------------------------------------------- 
| MessageID | Sender | Message   | 
-------------------------------------------- 
|   1 | admin  |my admin message | 
-------------------------------------------- 
| MessageID | Sender | Message   | 
-------------------------------------------- 
|   2 | sender1 |reply to admin | 

這裏是樣本結構我想實現：

-------------------------------------------- 
| MessageID | Sender | Message   | 
-------------------------------------------- 
|   1 | admin  |my admin message | 
|   2 | sender1 |reply to admin | 

雖然我有一些選擇，使其更容易，但要求說，每一條記錄應該是一個TBODY內

以下是我的樣品表結構：

<table class="gridtable"> 
    <tbody> 
      <tr class="toprowHeader" > 
       <td class="">...</td> 
      </tr> 
      <tr class="recordsRow " > 
       <td class="">...</td> 
      </tr> 
      <tr class="recordsRow " > 
       <td class="">...</td> 
      </tr>    

    </tbody> 
    <tbody> 
      <tr class="toprowHeader"> 
       <td class="">...</td> 
      </tr> 
      <tr class="recordsRow "> 
       <td class="">...</td> 
      </tr> 
      <tr class="recordsRow "> 
       <td class="">...</td> 
      </tr>    
    </tbody>  
</table> 

已添加要求：

很多人質疑上面的表格結構，但是我把它放在單獨的tbody裏面的主要原因是因爲我也有一個按鈕可以將第一個tbody移動到表格的底部/最後。

我使用PHP來顯示的記錄

Answer 1

見下文輸出，使用此

這將隱藏除第一個按照您的要求所有toprowHeaders

   $('tr.toprowHeader:gt(0)').hide(); 
 
       $('table').append($('tbody:eq(0)')); 
 
       console.log($('tbody:eq(0)')); 
 
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="gridtable"> 
 
    <tbody> 
 
      <tr class="toprowHeader" > 
 
       <td class="">title 1</td> 
 
      </tr> 
 
      <tr class="recordsRow " > 
 
       <td class="">record1</td> 
 
      </tr> 
 
      <tr class="recordsRow " > 
 
       <td class="">record1</td> 
 
      </tr>    
 

 
    </tbody> 
 
    <tbody> 
 
      <tr class="toprowHeader"> 
 
       <td class="">title2</td> 
 
      </tr> 
 
      <tr class="recordsRow "> 
 
       <td class="">record2</td> 
 
      </tr> 
 
      <tr class="recordsRow "> 
 
       <td class="">record2</td> 
 
      </tr>    
 
    </tbody> 
 
    <tbody> 
 
      <tr class="toprowHeader"> 
 
       <td class="">title3</td> 
 
      </tr> 
 
      <tr class="recordsRow "> 
 
       <td class="">record3</td> 
 
      </tr> 
 
      <tr class="recordsRow "> 
 
       <td class="">record3</td> 
 
      </tr>    
 
    </tbody> 
 
    <tbody> 
 
      <tr class="toprowHeader"> 
 
       <td class="">title4</td> 
 
      </tr> 
 
      <tr class="recordsRow "> 
 
       <td class="">record4</td> 
 
      </tr> 
 
      <tr class="recordsRow "> 
 
       <td class="">record4</td> 
 
      </tr>    
 
    </tbody> 
 
    <tbody> 
 
      <tr class="toprowHeader"> 
 
       <td class="">title5</td> 
 
      </tr> 
 
      <tr class="recordsRow "> 
 
       <td class="">record5</td> 
 
      </tr> 
 
      <tr class="recordsRow "> 
 
       <td class="">record5</td> 
 
      </tr>    
 
    </tbody> 
 
    <tbody> 
 
      <tr class="toprowHeader"> 
 
       <td class="">title6</td> 
 
      </tr> 
 
      <tr class="recordsRow "> 
 
       <td class="">record6</td> 
 
      </tr> 
 
      <tr class="recordsRow "> 
 
       <td class="">record6</td> 
 
      </tr>    
 
    </tbody>  
 
<tbody> 
 
      <tr class="toprowHeader"> 
 
       <td class="">title7</td> 
 
      </tr> 
 
      <tr class="recordsRow "> 
 
       <td class="">record7</td> 
 
      </tr> 
 
      <tr class="recordsRow "> 
 
       <td class="">record7</td> 
 
      </tr>    
 
    </tbody> 
 
</table>

Answer 2

您可以使用CSS，如下所示：

tbody:not(:first-child) .toprowHeader{ 
 
    display: none; 
 
}

<table class="gridtable"> 
 
    <tbody> 
 
    <tr class="toprowHeader"> 
 
     <td>Title</td> 
 
    </tr> 
 
    <tr class="recordsRow "> 
 
     <td>Record</td> 
 
    </tr> 
 
    <tr class="recordsRow "> 
 
     <td>Record</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr class="toprowHeader"> 
 
     <td>Title</td> 
 
    </tr> 
 
    <tr class="recordsRow "> 
 
     <td>Record</td> 
 
    </tr> 
 
    <tr class="recordsRow "> 
 
     <td>Record</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

順便說一句，你確實應該嘗試修改腳本，以省去額外的標題，而不是（兩者產生的話），並有內部<thead>