表格：仅显示表格正文的第一行。 如何隐藏后续的第一行？

Question

The very 1st row of EVERY tbody is the row header (contains the column Names). The rest of EVERY tbody succeeding 1st rows are not necessary and wanted to hide them.

Classes used:

toprowHeader = 1st row that holds every column names

recordsRow = holds the other record details

For now it shows like this:

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

Here is the sample structure I wanted to achieve:

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

Though I have some options to make it easier but the requirement says that every record should be inside a tbody

Here is my Sample Table structure:

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

Added requirement:

A lot of you questioned the table structure above but the main reason why I placed it inside individual tbody its because I also have a button to be able to move the 1st tbody to the bottom/last of the table.

I use PHP to display records

Answer 1

see output below ,Use this

It Will hide all the toprowHeaders except the first one as per your requirement

  $('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

You can use CSS as shown below:

 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> 

By the way, You should really try modifying the script to omit the extra titles instead (whichever generates it), and have a single title row inside <thead>