Javascript 使用jQuery对HTML表头进行分组

我想根据相同的内容对表头进行分组

 <table id="tblSample" border="1" >
    <tbody>
        <tr><th>Group#1</th><th>Group#1</th><th>Group#1</th><th>Group#21</th></tr>
        <tr><th>Sub-Group#1</th><th>Sub-Group#1</th><th>Sub-Group#2</th><th>Sub-Group#2</th></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td>   </tr>       
    </tbody>
</table>

---

使用

colspan

：

 <table id="tblSample" border="1" >
    <tbody>
        <tr><th colspan="3">Group#1</th><th>Group#21</th></tr>
        <tr><th>Sub-Group#1</th><th>Sub-Group#1</th><th>Sub-Group#2</th><th>Sub-Group#2</th></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td>   </tr>       
    </tbody>
</table>

组#1组#21
子组#1子组#1子组#2子组#2
1234

我不明白为什么您需要jQuery来完成这么简单的任务，但您可以这样做：

$("#tblSample")
    .find("tbody tr:first-child")
    .html('<th colspan="3">Group#1</th><th>Group#21</th>');

$（“待采样”）
.find（“tbody tr:第一个孩子”）
.html（'Group#1Group#21'）；

实际上我想要一个jQuery函数来合并它。@Rose添加了jQuery解决方案？如果我理解正确的话，最后你想要这样的东西吗。。。组#1组#2子组#1子组#2 14

$("#tblSample")
    .find("tbody tr:first-child")
    .html('<th colspan="3">Group#1</th><th>Group#21</th>');