CODEWITHSUNDEEP
javascriptphpjqueryhtmlhtml-table
Raf
Raf

Reputation: 708

Table: Show only the first row of table tbody. How to hide the succeeding 1st rows?

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

Upvotes: 0

Views: 4117

Answers (2)

A.B
A.B

Reputation: 20445

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>

Upvotes: 1

T J
T J

Reputation: 43156

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>

Upvotes: 1

Related Questions