jquery - 按多个 's 排序我需要<table>按分组的多个排序我<tbody>的 这很简单，看起来像这样： <table> <thead> <tr> <th>Header 1</th> <th>Header 2&l

Question

我需要<table>按分组的多个排序我<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-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>

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

如果我按 Header 1 排序以获得<td>顶部带有 Blue 小部件的 's，我需要将每个小部件全部<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/ ) 对我的表格进行排序，但它似乎不支持像这样对 tbody 进行分组。然后我检查了 TableSorter ( https://mottie.github.io/tablesorter/ )，但这似乎也不支持它。

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

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

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

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

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>