按多个 <tbody> 排序 <table>

Question

我需要按多个 <tbody> 的

分组对我的 <table> 进行排序

它非常简单，看起来像这样：

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody class="listing-1">
        <tr>
            <td>Blue widget</td>
            <td>1</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
    <tbody class="listing-2">
        <tr>
            <td>Red Widget</td>
            <td>2</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
    <tbody class="listing-3">
        <tr>
            <td>Blue widget</td>
            <td>3</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
</table>

我将每个列表分组到 <tbody> 中，并希望对每个 <tbody> 中的两个 <tr> 锁定在一起的 table 进行排序。

如果我按 Header 1 排序以获得顶部带有蓝色小部件的 <td>，我需要每个 <tbody> 的整体向上移动，所以它看起来喜欢：

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody class="listing-1">
        <tr>
            <td>Blue widget</td>
            <td>1</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
    <tbody class="listing-3">
        <tr>
            <td>Blue widget</td>
            <td>3</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
    <tbody class="listing-2">
        <tr>
            <td>Red Widget</td>
            <td>2</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
</table>

我一直在使用 ListJS (http://listjs.com/) to sort my tables, but it doesn't appear to support grouping tbody's like this. I then checked out TableSorter (https://mottie.github.io/tablesorter/)，但它似乎也不支持它。

我不知道如何对此进行排序，但我想我不可能是唯一一个想做这样的事情的人。也许我问错了问题？

任何有关如何执行此操作或使用哪个插件的帮助或建议都非常棒。

编辑：排序标准是 each 中 each 的第一个。每个中的第二个需要与每个中的第一个锁定在一起，而不是 sortable。所以第二个不应该是 sortable，而是应该与第一个 .

锁定

如果我仍然没有说清楚，请告诉我，我会再试一次。

Answer 1

不太清楚排序标准是什么。假设它是第二个单元格中的数字可以做类似的事情：

var $tBodies = $('tbody').sort(function(a, b){     
         var aVal = +($(a).find('tr:first td').eq(1).text().trim() || 0); 
         var bVal = +($(b).find('tr:first td').eq(1).text().trim() || 0);            
         return aVal - bVal;
    });
    
    $('table').append($tBodies);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody class="listing-1">
        <tr>
            <td>Blue widget</td>
            <td>1</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
    <tbody class="listing-3">
        <tr>
            <td>Blue widget</td>
            <td>3</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
    <tbody class="listing-2">
        <tr>
            <td>Red Widget</td>
            <td>2</td>
        </tr>
        <tr>
            <td colspan="2">text</td>
        </tr>
    </tbody>
</table>

按多个 <tbody> 排序 <table>

Sort <table> by multiple <tbody>'s

jquery

sorting

html-table

tablesorter

listjs