如何使用jQuery在表格thead中插入新的首行？

我有如下表格结构：

<table id="test">
<thead>
<tr><td>Main Head 1</td><td>Main Head 2</td></tr>
<tr><td>Sub Head 1</td><td>Sub Head 2</td></tr>
</thead>
<tbody>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
</tbody>
</table>

希望在该表格的thead中插入新的首行，最终结构如下：

<table>
    <thead>
    <tr><td colspan="2">HEADING</td></tr>
    <tr><td>Main Head 1</td><td>Main Head 2</td></tr>
    <tr><td>Sub Head 1</td><td>Sub Head 2</td></tr>
    </thead>
    <tbody>
    <tr><td>Data 1</td><td>Data 2</td></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
    </tbody>
</table>

我尝试了以下jQuery代码，但新行被插入到tbody的首行位置，而非thead中：

var cln = $('#test').clone();
cln.prepend('<tr><th>HEADING</th></tr>');

解决方法 #

问题出在直接对table元素执行prepend操作——table的直接子元素只能是thead、tbody这类容器，直接插入tr会被浏览器自动归到tbody中。正确的做法是先定位到thead容器，再在其内部前置新行：

var cln = $('#test').clone();
// 定位到克隆表格的thead，然后在内部前置新行
cln.find('thead').prepend('<tr><td colspan="2">HEADING</td></tr>');

这样新的tr就会被插入到thead的最顶部，完全符合需求。

内容的提问来源于stack exchange，提问作者user6625547