Comment supprimer l'affichage des valeurs répétitives dans les tableaux html qui peuvent être triés ?

Question

J'ai un tableau en HTML que je génère à partir de XML/XSL et je veux qu'il supprime les valeurs répétitives. Cependant, je veux aussi pouvoir le trier à la volée en cliquant sur les titres.

Sans un aller-retour vers le serveur, je dois supprimer différentes valeurs après chaque tri. Existe-t-il une bonne solution javascript/css ?

Par exemple

Données

Date  Person Score  
May   Jeff   1  
May   Joel   2  
June  Alex   1

Affichage initial
Notez l'absence du second mai

Date  Person Score  
May   Jeff   1  
      Joel   2  
June  Alex   1

Affichage après le tri par score
Notez l'absence du deuxième 1

Date  Person Score  
May   Joel   2  
June  Alex   1
May   Jeff

Answer 1

Personnellement, j'utiliserais quelque chose comme Trieuse de tableaux jQuery . Vous pouvez également utiliser la fonction unique() pour supprimer les doublons. L'utilisation de jQuery rend les choses beaucoup plus faciles que l'utilisation de JS. Ou alors, j'utiliserais JSF pour ma couche de présentation, qui est déjà dotée de fonctionnalités pour de telles occasions.

Je ne connais pas vraiment de "bonne" façon de le faire avec JS. Chaque implémentation en JS que j'ai vue est désordonnée. L'ajout de jQuery à votre projet vous évitera d'avoir à écrire du code JS désagréable.

Answer 2

Demandez à une fonction javascript de parcourir en boucle les colonnes pertinentes du tableau et de supprimer les valeurs qui sont identiques aux précédentes. Vous pouvez également ajouter un attribut rowspan à la première cellule contenant cette valeur afin que la sémantique du tableau soit correcte.

Ce n'est pas vraiment un travail pour CSS car il traite l'information et ne se contente pas d'afficher les choses (de plus, ce serait vraiment difficile).

Answer 3

Je recommanderais de définir une classe sur les td's avec des valeurs répétées pour les cacher, afin de ne pas perdre les données. Vous pouvez passer en boucle chaque cellule de la colonne, en la comparant à la dernière, et si c'est la même chose, ajouter la classe "duplicate" à la cellule.

function after_sort(sort_column) {
    clear_duplicate_classes();

    var last = null;
    for (var i = 0; i < trs.length; i++) {
        var td = get_nth_td(trs[i], sort_column);
        if (td.innerHTML === last) {
            add_duplicate_class(td);
        }
        else {
            last = td.innerHTML;
        }
    }
}

Si vous utilisez une bibliothèque comme jQuery, cela ressemblera à ceci :

function after_sort(table, sort_column) {
    $(table).find(".duplicate").removeClass("duplicate");

    var last = null;
    $(table).find("tr").each(function() {
        var td = $(this).find("td").get(sort_column); // doesn't account for colspan
        if (td.innerHTML === last) {
            $(td).addClass("duplicate");
        }
        else {
            last = td.innerHTML;
        }
    });
}

Ils n'ont pas été testés du tout, donc je peux avoir manqué quelque chose. Utilisez-les à vos propres risques, etc.