J’ai une table comme celle-ci:
Department Quantity Data 100 DTP 20 VTP 30 RTP 50 Testing 100 QTP 20 ATP 30 CTP 50
Lorsque je clique sur l’en-tête du département, les données internes et les tests doivent être sortingés. Mais les données et les tests TH
devraient restr les mêmes.
Je ne veux utiliser aucun plugin jQuery. Veuillez partager le code pour faire cette tâche.
Voici une mise en œuvre rapide. J’espère que vous l’améliorerez et que cela répondra à vos besoins:
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 == 'ssortingng') { return aText.localeCompare(bText); } else { return +aText - +bText; } }) .appendTo(this); }); $(this).data('dir', sortDir == 'asc' ? 'desc' : 'asc'); $(this).removeClass().addClass('sort-' + sortDir); });