jQuery，通过单击标题，使用colspan对表列进行排序

我想使用jQuery对表进行排序。该表有4列的行和1列的行（单击前面的4列1时显示）。是否可以按4列行的值对表进行排序？所以e。G单击标题2后，假设第一次单击进行升序排序，则表格将反转

<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>1</td><td>XYZ</td><td>456</td><td>0</td></tr>
<tr class="inside"><td colspan="4">Inside text</td></tr>
<tr><td>859</td><td>IOI</td><td>132</td><td>9</td></tr>
<tr class="inside"><td colspan="4">Inside text</td></tr>
<tr class="inside"><td colspan="4">Another inside text</td></tr>
<tr><td>798</td><td>GJOI</td><td>798</td><td>12</td></tr>
<tr class="inside"><td colspan="4">Inside text</td></tr>
</table>

收割台1收割台2收割台3收割台4
1XYZ4560
内部文本
859IOI1329
内部文本
另一个内部文本
798GJOI79812
内部文本

我认为这个jquery插件非常符合您的要求

您可以使用插件：

$（函数（）{
$（“表”）.tablesorter（）；
});
table.tablesorter{
字体系列：arial；
背景色：#CDCDCD；
利润率：10px 0pt 15px；
字号：8pt；
宽度：100%；
文本对齐：左对齐；
}
table.tablesorter thead tr th，table.tablesorter tfoot tr th{
背景色：#e6EEEE；
边框：1px实心#FFF；
字号：8pt；
填充：4px；
}
table.tablesorter thead tr.标题{
背景图像：url（bg.gif）；
背景重复：无重复；
背景位置：右中；
光标：指针；
}
table.tablesorter tbody td{
颜色：#3d3d；
填充：4px；
背景色：#FFF；
垂直对齐：顶部；
}
table.tablesorter tbody tr.odd td表{
背景色：#F0F6；
}
table.tablesorter thead tr.headerSortUp{
背景图片：url（asc.gif）；
}
table.tablesorter thead tr.headerSortDown{
背景图像：url（desc.gif）；
}
table.tablesorter thead tr.headerSortDown，table.tablesorter thead tr.headerSortUp{
背景色：#8dbdd8；
}

标题1
标题2
标题3
标题4
1.
XYZ
456
0
内部文本
859
IOI
132
9
内部文本
另一个内部文本
798
GJOI
798
12
内部文本
看起来不错，但是我希望像排序之前一样将内部文本行保留在相应的主行下