jQuery add thead to the table

Question

I am using MyFaces Trinidad JSF framework and it creates tr:table as follows:

<table id="myTable">
    <tbody>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

I need the below one to implement scrollable header. So I am trying to convert them using jQuery

<table id="myTable">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

I have tried this and this answers, but none of them solves my problem.

Show what you've tried, link to the answers you claim you've tried to use. — T.J. Crowder, Jun 13 '16 at 17:23
http://stackoverflow.com/questions/12781886/jquery-add-thead-and-add-tbody and this one as well http://stackoverflow.com/questions/16804648/included-thead-and-tbody-on-this-table — Pat, Jun 13 '16 at 17:24
Okay, that's the second part (but it belongs in the question). Show what **you've** tried. In your question. — T.J. Crowder, Jun 13 '16 at 17:25

Pranav C Balan · Accepted Answer · 2016-06-13T18:03:20.677

Wrap first row with thead and append at the beginning of the table

$('#myTable tbody tr:first') // get first row
  //.detach() // remove from table, it's optional to detach
  .wrap('<thead/>') // wrap with tbody
  .parent() // get tbody 
  .prependTo('#myTable') // append at the beginning

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tbody>
  <tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</tbody>
</table>

score 1 · Answer 2 · answered Jun 13 '16 at 17:31

you can use

// append the first row to thead and prepend thead to #mytable
$('<thead></thead>').append($('tbody > tr:nth-child(1)')).prependTo('#myTable');
// remove the first row from tbody
$('#myTable > tbody > tr:nth-child(1)').remove();

// append the first row to thead and prepend thead to #mytable
$('<thead></thead>').append($('tbody > tr:nth-child(1)')).prependTo('#myTable');
// remove the first row from tbody
$('#myTable > tbody > tr:nth-child(1)').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">

<tbody><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>

<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></tbody>

</table>

I have tried this var myTable = $('table.af_table_content'); // append the first row to thead and prepend thead to #mytable $('').append($('tbody > tr:nth-child(1)')).prependTo(myTable); // remove the first row from tbody $('#myTable > tbody > tr:nth-child(1)').remove(); Can you help me in changing the last line? Since there is no id getting generated for that table, trying to use the class attribute — Pat, Jun 13 '16 at 17:57
@Pat : there is no need for that line , since append moving the original tr not copy — Pranav C Balan, Jun 13 '16 at 18:02

jQuery add thead to the table

2 Answers2