Jquery排序多个Tbody

Question

我有一张这样的表：

<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插件。请共享代码来执行此任务。

Answer 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/