Question

我有一个无法访问现有HTML的站点，我需要使用jQuery来更改表的结构。

这是现有的HTML表格

<table id="MyTable">
 <caption></caption>
  <tbody>         <!--remove the tbody here and add thead-->
   <tr>           <!--remove this tr-->
    <th></th>        
    <th></th>        
    <th></th>  
   </tr>          <!--remove this tr and add a closing thead-->
                  <!--add opening tbody here -->
   <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
    </tr>
    <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
    </tr>
   </tbody>
</table>

我需要让表格布局看起来像这样

<table id="MyTable">
 <caption></caption>
  <thead>        
    <th></th>        
    <th></th>        
    <th></th>   
  </thead>   
  <tbody>
   <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
    </tr>
    <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
    </tr>
  </tbody>
</table>

所以我需要用thead包裹th，删除包裹它们的tr 然后将tbody移到th以下并重新添加thead。这可能吗？

Answer 1

您可以使用.before()：

＆＃13;

var thead = $('<thead>', {   // creates a thead 
       html:$('#MyTable tbody tr').eq(0)  // <----puts the first tr of tbody
    });

    $('#MyTable tbody').before(thead)
    //$('#MyTable thead').find('th').unwrap(); // <-----use this to remove the tr but not needed.

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="MyTable" border='1' width='90%'>
 <caption>caption here</caption>
  <tbody>         <!--remove the tbody here and add thead-->
   <tr>           <!--remove this tr-->
    <th>a</th>        
    <th>b</th>        
    <th>c</th>  
   </tr>          <!--remove this tr and add a closing thead-->
                  <!--add opening tbody here -->
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
   </tbody>
</table>

＆＃13;

我想您需要在tr元素中使用thead。

Answer 2

您可以使用此功能添加th元素

$("#MyTable").find('tbody tr:first').append("<th>TH4</th>");

Jai的其余代码（最佳答案）

var thead = $('<thead>', {   // creates a thead 
   html:$('#MyTable tbody tr').eq(0)  // <----puts the first tr of tbody
});

$('#MyTable tbody').before(thead)

使用jQuery更改表结构

2 个答案: