Javascript Girl
  1. Javascript Girl
  3. En utilisant jquery, comment réorganiser les lignes dans une table en fonction d'un attribut TR?
Intereting Posts
Ajout de plusieurs événements addListener à un formulaire Google Map avec un géocodage Three.js – Comment vérifier si un objet est visible pour la caméra Comment modifier la valeur de contenu de pseudo: avant élément par Javascript Pourquoi suis-je en train d'obtenir cette erreur? Dest.on n'est pas une fonction – using gulp-file-include Dans un ensemble d'objets, le moyen le plus rapide de trouver l'index d'un objet dont les attributs correspondent à une recherche Comment puis-je utiliser JQuery pour supprimer toutes les balises "script" dans une chaîne de HTML? Protéger les images d'une copie Iframe shimming ou ie6 (et ci-dessous) sélectionnez un bogue z-index Ouverture par programme de la page options.html d'un plugin Chrome? Insérer html au caret dans un div contentatif Scope chain look-up vs prototype look-up – C'est quand Comment obtenir une URL de réponse dans XMLHttpRequest? Garder le titre de la ligne et le titre de la colonne d'une table visible lors du défilement Sélection et recherche de site dans l'extension chrome Node.js envoyer un fichier au client

En utilisant jquery, comment réorganiser les lignes dans une table en fonction d'un attribut TR?

J'ai une table avec des lignes semblables à celles qui suivent. Ces lignes sont mises à jour de temps en temps via les appels jquery. En utilisant jquery, comment construire une fonction qui réorganise ces lignes de table en fonction de la valeur myAttribute mettant les lignes de valeurs myAttribute les plus élevées en haut et les lignes de valeur myAttribute les plus bas en bas? Il pourrait y avoir jusqu'à 100 lignes dans le tableau. 

<tr id='1' class='playerRow' myAttribute=5> <td> One</td> <td> Two</td> </tr> <tr id='2' class='playerRow' myAttribute=6> <td> One</td> <td> Two</td> </tr> 

 <table> <tr id='1' class='playerRow' myAttribute='1'> <td> One1</td> <td> Two1</td> </tr> <tr id='2' class='playerRow' myAttribute='2'> <td> One2</td> <td> Two2</td> </tr> </table>

JQuery 

 var $table=$('table'); var rows = $table.find('tr').get(); rows.sort(function(a, b) { var keyA = $(a).attr('myAttribute'); var keyB = $(b).attr('myAttribute'); if (keyA < keyB) return 1; if (keyA > keyB) return -1; return 0; }); $.each(rows, function(index, row) { $table.children('tbody').append(row); });

Démo de travail est http://www.jsfiddle.net/HELUq/1/

Merci, Kai. J'ai un peu distillé le code tout en préservant la clarté. En général, vous ne voulez pas trier THEAD ou TFOOTER, il est donc utile de cibler uniquement les TR dans un TBODY (bien que ce ne soit pas dans la question originale de Chris): 

  var tb = $('tbody'); var rows = tb.find('tr'); rows.sort(function(a, b) { var keyA = $(a).attr('myAttribute'); var keyB = $(b).attr('myAttribute'); return keyA - keyB; }); $.each(rows, function(index, row) { tb.append(row); });

Pour trier par ordre décroissant, inversez simplement la ligne de retour comme suit: 

  return keyB - keyA;