I have a html table generated by BIRT as follow:

<table id="myTableID">
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>

    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>

    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</table>

I want to write a JavaScript code that reads this table and re-writes it in the following form: getting the first row of the table in a <thead> tag, and the rest of the table in the <tbody> tag:

<table id="myTableID">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th> 
        </tr>
    </thead>

    <tbody>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>

        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tbody>    
</table>

I have a basic knowledge about the JavaScript, but I have no clue how to proceed with such case. Please any help?

I have a html table generated by BIRT as follow:

<table id="myTableID">
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>

    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>

    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</table>

I want to write a JavaScript code that reads this table and re-writes it in the following form: getting the first row of the table in a <thead> tag, and the rest of the table in the <tbody> tag:

<table id="myTableID">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th> 
        </tr>
    </thead>

    <tbody>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>

        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tbody>    
</table>

I have a basic knowledge about the JavaScript, but I have no clue how to proceed with such case. Please any help?

• javascript
• jquery
• html
• birt

Share Improve this question Follow edited Nov 26, 2015 at 20:35 Thilina Sampath 3,77377 gold badges4242 silver badges6666 bronze badges asked Oct 1, 2015 at 14:00 DhohaDhoha 36933 gold badges66 silver badges1717 bronze badges 3

• $('#myTableID tr:first').wrap('<thead />') – Tushar Commented Oct 1, 2015 at 14:02
• Basically th is for thead and td is for tbody. Do you need th for tbody as well? – Deepak Biswal Commented Oct 1, 2015 at 14:14
• If td is OK then please let me know I'll post my answer.. – Deepak Biswal Commented Oct 1, 2015 at 14:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

1. Use prependTo() to insert the thead element
2. Use append() to insert the first tr inside the thead

$('<thead></thead>').prependTo('#myTableID').append($('#myTableID tr:first'));

console.log($('#myTableID')[0].outerHTML);

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table id="myTableID">
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>

    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>

    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</table>