Jquery对多个Tbody进行排序答案

【问题标题】：Jquery Sort multiple TbodyJquery对多个Tbody进行排序
【发布时间】：2016-05-02 04:28:15
【问题描述】：

我有一张这样的桌子：

<table>
    <thead>
        <tr>
            <th>Department</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Data</th>
            <th>100</th>
        </tr>
        <tr>
            <td>DTP</td>
            <td>20</td>
        </tr>
        <tr>
            <td>VTP</td>
            <td>30</td>
        </tr>
        <tr>
            <td>RTP</td>
            <td>50</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th>Testing</th>
            <th>100</th>
        </tr>
        <tr>
            <td>QTP</td>
            <td>20</td>
        </tr>
        <tr>
            <td>ATP</td>
            <td>30</td>
        </tr>
        <tr>
            <td>CTP</td>
            <td>50</td>
        </tr>
    </tbody>
</table>

当我点击部门标题时，tr 内部数据和测试应该得到排序。但是数据和测试TH 应该保持不变。

我不想使用任何 jQuery 插件。请分享代码来完成这项任务。

【问题讨论】：

排序依据？要具体。
按升序或降序排序。
数据和测试在每个tbody中独立排序？
但是排序什么？数值还是 QTP,ATP？
是的。 QTP ， ATP 数字是独立的。数据和测试 TH 将保持不变。只有数据和测试中的 TR 将被排序，即 - 数据 - DTP、VTP、RTP 和测试 - QTP、ATP、CTP 将被排序。

标签： jquery sorting jquery-plugins jquery-ui-sortable

【解决方案1】：

这是一个快速实现。希望您能改进它并满足您的需求：

var $table = $('table'),
    $th = $table.find('thead th'),
    $tbody = $table.find('tbody');

$th.on('click', function() {

    $th.removeClass();

    var index = this.cellIndex,
        sortType = $(this).data('sort'),
        sortDir  = $(this).data('dir') || 'asc';

    $tbody.each(function() {
        $(this).find('tr').slice(1).sort(function(a, b) {

            var aText = $(a).find('td:eq(' + index + ')').text(),
                bText = $(b).find('td:eq(' + index + ')').text();

            if (sortDir == 'desc') {
                temp = aText;
                aText = bText;
                bText = temp;
            }

            if (sortType == 'string') {
                return aText.localeCompare(bText);    
            }
            else {
                return +aText - +bText;
            }
        })
        .appendTo(this);
    });

    $(this).data('dir', sortDir == 'asc' ? 'desc' : 'asc');
    $(this).removeClass().addClass('sort-' + sortDir);
});

演示：http://jsfiddle.net/6uzVn/

【讨论】：