jQuery的添加THEAD表

Question

我使用MyFaces Trinidad JSF框架，它創造TR：表如下：

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

我需要下面的一個實施滾動的標題。所以我想用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> 

我試圖this和this他們的答案進行轉換，但它們都沒有解決我的問題。

Answer 1

裹第一行與thead並追加在表的開頭

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

Answer 2

可以使用

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