Move first row of a HTML table under a thead tag using JavaScript

Question

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?

Answer 1

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.com/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>