使用 jQuery 按列值对正文元素进行排序

我正在尝试对表格进行排序 - 因此当用户单击表格标题时，它将按升序/降序排序。我已经到了可以根据列值对表进行排序的程度。但是，我有表格行的分组（每个表正文两行），我想根据每个表体第一行的列中的值对列进行排序，但是当它对表重新排序时，它希望它重新排序表正文，而不是表行。

<table width="100%" id="my-tasks" class="gen-table">
<thead>
    <tr>
        <th class="sortable"><p>Name</p></th>
        <th class="sortable"><p>Project</p></th>
        <th class="sortable"><p>Priority</p></th>
        <th class="sortable"><p>%</p></th>
    </tr>
</thead>
<tbody>
<tr class="sortable-row" id="44">
    <td><p>dfgdf</p></td><td><p>Test</p></td>
    <td><p>1</p></td><td><p>0</p></td>
</tr>
<tr>
    <td></td>
    <td colspan="3"><p>asdfds</p></td>
</tr>
</tbody>
<tbody>
<tr class="sortable-row" id="43">
    <td><p>a</p></td>
    <td><p>Test</p></td>
    <td><p>1</p></td>
    <td><p>11</p></td>
</tr>
<tr>
    <td></td>
    <td colspan="3"><p>asdf</p></td>
</tr>
</tbody>
<tbody>
<tr class="sortable-row" id="40">
    <td><p>Filter Tasks</p></td>
    <td><p>Propel</p></td>
    <td><p>10</p></td>
    <td><p>10</p></td>
</tr>
<tr>
    <td></td>
    <td colspan="3"><p>Add a button to filter tasks.</p></td>
</tr>
</tbody>
</table>

使用以下 JavaScript：

jQuery(document).ready(function () {
    jQuery('thead th').each(function(column) {
        jQuery(this).addClass('sortable').click(function() {
            var findSortKey = function($cell) {
                return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
            };
            var sortDirection = jQuery(this).is('.sorted-asc') ? -1 : 1;
            var $rows = jQuery(this).parent().parent().parent().find('.sortable-row').get();
            jQuery.each($rows, function(index, row) {
                row.sortKey = findSortKey(jQuery(row).children('td').eq(column));
            });
            $rows.sort(function(a, b) {
                if (a.sortKey < b.sortKey) return -sortDirection;
                if (a.sortKey > b.sortKey) return sortDirection;
                return 0;
            });
            jQuery.each($rows, function(index, row) {
                jQuery('#propel-my-tasks').append(row);
                row.sortKey = null;
            });
            jQuery('th').removeClass('sorted-asc sorted-desc');
            var $sortHead = jQuery('th').filter(':nth-child(' + (column + 1) + ')');
            sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc');
            jQuery('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');
        });
    });
});