Enlever des doublons dans un tableau html

bonjour,

j'ai un tableau HTML dont chaque cellule contient des listes , j'ai besoin d'enlever les doubles MAIS par ligne uniquement (et non pas les doublons dans le tableau global).

j'ai réussi à faire la première étape qui consiste à sélectionner toutes les lignes au travers du tableau dans les TR et de trouver les doublons.
ce que je n'arrive pas à formuler en jquery dans la partie selector, c'est le "par ligne", du coup mon script enlève les doublons qu'il faut pas !

exemple tableau :

1 2 2 (2 est doublon dans la ligne)
4 5 1 (aucun doublon)
5 5 1 (5 est doublon dans la ligne)

je veux donc avoir:

1 2 X
4 5 1
5 X 1

mon script actuel ne gère pas le "par ligne", du coup il enlève trop de choses :
1 2 X
4 5 X
X X X

mon script :

Code:

---

1 2 3 4 5 6 7

var dejavu= {}; $('table tr select').each(function() { var txt = $(this).text(); if (dejavu[txt]) $(this).remove(); else dejavu[txt] = true;

---

explication de mon script :
je crée une variable ensembliste dejavu qui contiendra les éléments rencontrés
je fais la selection jquery
je converti chaque contenu visible en texte
si ce contenu est déjà présent dans dejavu, alors je supprime l’élément html sinon je mets à jour mon ensemble

Je n'ai pas trouvé la doc jquery qui me permet de formuler un each dans un each pour faire mon "pour chaque SELECT dans chaque TR", est-ce que c'est possible ?

une autre solution me vient en tête serait de gérer le bi-dimensionnel dans mon dejavu en stockant l'indice de la ligne afin d'éviter les faux-doublons .

qu'en pensez-vous ? je me prends la tête où il y a plus simple ?

re-bonjour,

j'ai peut-être trouver plus simple :

pour l'instant (je teste). en gros je récupère l'index du plus proche TR et je le concataine à la chaine servant de detecteur de doublon !

Code:

---

1 2 3 4 5 6 7 8 9 10

var dejavu= {}; $('table tr select').each(function() { var txt = $(this).text(); var trproche = $(this).closest('tr'); var txt2= trproche .index(); txt=txt+txt2; if (dejavu[txt]) $(this).remove(); else dejavu[txt] = true;

---

Bonjour,

Citation:

---

Je n'ai pas trouvé la doc jquery qui me permet de formuler un each dans un each pour faire mon "pour chaque SELECT dans chaque TR", est-ce que c'est possible ?

---

tous les cas ne sont pas dans les documentations, après il suffit de suivre la logique, en gros :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// récup. des lignes, TR, de la TABLE const $lesTRsDeLaTable = $("table tr");   // on boucle sur chaque ligne $lesTRsDeLaTable.each(function() {   // récup. des SELECT de la ligne const lesSelectsDeLaLigne = $(this).find("select");   // on boucle sur chaque select lesSelectsDeLaLigne.each(function() { // ton code } }

---

Bonjour,

Il faudrait mieux nous montrer une structure simple de ton tableau HTML et nous dire ce que tu cherches à remplacer exactement, car quand je vois ça

Code:

---

1 2 3 4 5 6

$('table tr select') .each(function() { var txt = $(this).text(); ... });

---

Là tu parcours tout les <select> pour récupérer le texte au complet, et donc tout le texte de toutes les <option> de la liste.

Je me demande si c'est ce que tu cherches à remplacer ... ?

bonjour toufik,

Citation:

---

Là tu parcours tout les <select> pour récupérer le texte au complet, et donc tout le texte de toutes les <option> de la liste.

---

après ta réponse j'ai douté, donc j'ai ajouté un console.log (txt);

et je pense que tu as tord car pour une liste SELECT , $(this).text(); ne renvoie que le texte visible affiché à l'écran et non pas la totalité des options des listes déroulantes.
Dans le cas où j'aurai utilisé des listes à choix multiples, tu aurais eu entièrement raison sur le problème du .text

Bonjour,

Apparemment c'est toi qui as tord, car le teste ci-dessous renvoie tout le texte des options et pas seulement celle qui est visible (sélectionnée) :

Code:

---

1 2 3 4 5 6

<select> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11

$('select').each(function(){ console.log("text :",$(this).text()); /* renvoie :  text : option 1 option 2 option 3   */ });

---

Merci Einstein, celui qui n'a pas aimé ma réponse :weird:

Citation:

---

Envoyé par clavier12AZQSWX

et je pense que tu as tord car pour une liste SELECT , $(this).text(); ne renvoie que le texte visible affiché à l'écran et non pas la totalité des options des listes déroulantes.

---

Non !

Citation:

---

Envoyé par Toufik83

Apparemment c'est toi qui as tord,

---

Oui !! jqObject.text() retourne le textContent de l'élément.

bonjour,

c'est bien étrange, je viens de triple-chécké et j'ai bien QUE le texte de la liste qui arrive et pas les options entière. je cherche à savoir pourquoi...
voici une partie épurée de mon code (juste un TD), mais je ne vois aucune particularité.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<td data-name="etu_grp1_id" class="ew-table-last-row"> <span id="el1_etudiants_groupe_etu_grp1_id" class="form-group"> <div class="input-group"> <select class="custom-select ew-custom-select" data-table="etudiants_groupe" data-field="x_etu_grp2_id" data-value-separator=", " id="x1_etu_grp2_id" name="x1_etu_grp2_id" style="font-size: 10px; background-color: rgb(249, 253, 208);"> <option value="">Choisir...</option> <option value="1">NC</option> <option value="94">ART</option> <option value="140">car spéciaux/toto l'été</option> <option value="151">cours individuels</option> <option value="95">geek</option> <option value="32">grp1</option> <option value="45">grp2</option> <option value="44">grp3</option> <option value="93">music</option> <option value="145">**vieux groupe</option> <option value="143">ancien groupe (supprimé!)</option> <option value="153">cours particuliers CPF (supprimé!)</option> <option value="73">grp0 (supprimé!)</option> </select> </div> </span> </td>

---

dans mon cas, je fais exactement comme vous :

Code:

---

1 2 3

$('table#tbl_etudiants_groupelist tr select').each(function() { var txt = $(this).text(); console.log (txt);

---

et que ce soit firefox ou Chrome, j'ai bien les options qui n'apparaissent pas !

Pièce jointe 611610

très intriguant cette différence...


est-ce que le fait d'une particularité de class/css ? à cause du mode flex du formulaire ?

je pose 3 hypothèse mais j'arrive pas à les vérifier :
1. je fais un selector jquery avec plusieurs liens de parentés donc peut-être que le .text ne prend en compte que le 1er option
2. mon select est attaché à des data field/value (liste dynamique) , peut-être qu'au moment de l'interrogation du DOM, .text ne trouve que l'élément visible/sélectionné
3. une particularité du formulaire FLEX / framework, le fait qu'il y ait un DIV ou SPAN au dessus de ça...

j'ai beau relire la conversation, je ne comprends pas trop ce que tu cherches a recuperer ...

si tu cherches a recuperer toutes les options des selects :

Code:

---

1 2 3 4 5

document.querySelectorAll('select').forEach(select => { [...select.options].forEach(option => { console.log(option.textContent); }); });

---

si tu cherches a recuperer les options selectionnees de tes select :

Code:

---

1 2 3

document.querySelectorAll('select').forEach(select => { console.log(select.value); });

---

j'ai mis "résolu" car dans la fond ça l'est.

Citation:

---

j'ai beau relire la conversation, je ne comprends pas trop ce que tu cherches a recuperer ...

---

pour la refaire en court, à la base je cherche à masquer le contenu de TDs qui sont doublons dans des TR.
Le contenu peut être n'importe quoi mais dans mon cas c'est des listes SELECT simple (pas multiselect).
Avec la solution .text, on peut récupérer le contenu textuel d'un élément et donc faire des comparaisons.
Il y a un chouillat de discussion car dans mon cas, .text renvoie QUE l'élement sélectionné alors que NoSmoking et Toufik ont l''ensemble des options du select qui est retourné par le .text.

Dans les 2 cas, le sujet est résolu car j'élimine mes doublons de TD pour chaque TR.

Il est toujours bon de savoir pourquoi on n'obtient pas l'attendu, cela s'appelle le retour d'expérience qui crée l’expérience justement ;)

Citation:

---

3. une particularité du formulaire FLEX / framework, le fait qu'il y ait un DIV ou SPAN au dessus de ça...

---

Citation:

---

c'est des listes SELECT simple

---

... tu ne nous avais pas dit qu'il s'agissait de « custom select », vu l'utilisation de jsrender.js, la raison est peut-être là !

Il faudrait que tu analyses le code généré en regardant par exemple l'inspecteur (F12) pour voir la construction finale.