Jquery排序多个Tbody

我有这样一张桌子:

Department Quantity
Data 100
DTP 20
VTP 30
RTP 50
Testing 100
QTP 20
ATP 30
CTP 50

当我点击department标题时, tr内部的数据和测试应该被排序。 但数据和测试TH应该保持不变。

我不想使用任何jQuery插件。 请共享代码来完成此任务。

这是一个快速实现。 希望你会改进它,它将符合你的需求:

 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/