Filtrer les <TD> dont le contenu commence par un valeur saisie

**french-petzouille** · 04/02/2019, 14h45

bonjour

soit une table de classe .table ... avec les lignes de la table avec des <tr class="wrap">

je souhaite via un champ :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="search" class="findNotes" size="20" placeholder="filtrer sur...">

... filtrer les lignes du tableau sur les seules lignes qui commencent par les caractères saisies dans ce champ :

je parviens à faire un truc qui ne retient que les lignes dont les <td> contiennent les caractères saisis :

mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
/// Filtrage des PRATICIENS DE LA LISTE DES PRATICIENS VUS PAR NOM
$(document).on('keyup','.findNotes',function(){
      var div2=$('.table td');
      var motcle=$(this).val();
      if(motcle!=''){
          div2.parents('tr.wrap').show(); // on affiche ou on reaffiche tout
          div2.not(':contains('+motcle+')').parents('tr.wrap').toggle();
          }
      else{
            div2.parents('tr.wrap').show();
      }
});

je ne parviens par à n'afficher que les lignes qui "commencent par ..."

une aide serait sympa

mouchas gracias

PS :
Mon bout de code est en bas de ma page .php dans une balise <script>.
Cela permet sans refaire une requête mysql à chaque caractère saisi de filtrer l'affichage du tableau ... cela me parait propre comme principe.
A chaque appui sur une touche clavier ... keyup ... on a le jQuery qui est interrogé... et les lignes ( en fait les <td> ) qui
ne sont pas porteuses du (des) caractère(s) saisis sont tout simplement rendu invisibles via l'utilisation de .parents() qui va donc cibler la balise <tr> ( parente de la <td> )

mais ... je me répète ... je voudrai simplement que seules les NOMS qui commencent par les caractères saisis restent visibles .

**Toufik83** · 04/02/2019, 15h23

Salut,
Utilise indexOf dans un each

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<input type="search" class="findNotes" size="20" placeholder="filtrer sur..." />
<table class="table">
<tr class="wrap"><td>valeur 1</td></tr>
<tr class="wrap"><td>_valeur 1</td></tr>
<tr class="wrap"><td>valeur_1</td></tr>
<tr class="wrap"><td>_valeur__1</td></tr>
<tr class="wrap"><td>__valeur_1</td></tr>
</table>

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$(document).on('keyup','.findNotes',function(){
      var tds=$('.table td');
      var motcle=$(this).val().toLowerCase();
      tds.each(function(){
      	if($(this).text().toLowerCase().indexOf(motcle)==0){
      		$(this).parent("tr").show();
        }
        else{
        	$(this).parent("tr").hide();
        }
      });
});

Envoyé par french-petzouille

Mon bout de code est en bas de ma page .php dans une balise <script>.
Cela permet sans refaire une requête mysql à chaque caractère saisi de filtrer l'affichage du tableau ... cela me parait propre comme principe.

Il est possible aussi de mettre ton script au début de page, plus précisément dans la balise <head> en mettant ton code js à l'intérieur de

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

$(document).ready(function(){/*ton code ici*/});

ou

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

$(function(){/*ton code ici*/});

**french-petzouille** · 04/02/2019, 16h05

merci toufik83...
ta proposition me semble alléchante.
je découvre indexof ...
en testant ... quels que soit les caractères saisies ... cela masque toutes les balises <tr>.
étrange !!

**Toufik83** · 04/02/2019, 16h11

Quel est la structure de ta table ?
Qu'est ce que tu as écris comme code jQuery ?

**french-petzouille** · 04/02/2019, 16h21

le code adapté à ma table :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(document).on('keyup','.findNotes',function(){
      var div2=$('.tablerow>div:nth-child(1) td.filtre');
      var motcle=$(this).val().toLowerCase();
      div2.each(function(){
      	if($(this).text().indexOf(motcle)==0){
      		$(this).parent('tr.wrap').show();
        }
        else{
        	$(this).parent("tr.wrap").hide();
        }
      });
});

PS : je suis sur de la notation : $('.tablerow>div:nth-child(1) td.filtre'); ( ma demande d'aide avant simplifié l'écriture )

et ma table générée en php est composé de <tr> comme suit

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<tr class="wrap">
					<td class="left">A</td>
					<td class="filtre">DUPOND</td>
					<td class="right">167.00 €</td>
					<td class="c">Chq</td>
					<td class="c">D</td>
</tr>

si je place un : alert($(this).text().indexOf(motcle));.
j'ai toujours des -1 !! que que soit le caractère saisi !

**french-petzouille** · 04/02/2019, 16h27

je viens de trouver l'anomalie

il me faut mettre en minuscule le texte du <td>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
if($(this).text().toLowerCase().indexOf(motcle)==0){

**Toufik83** · 04/02/2019, 16h29

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var div2=$('.tablerow>div:nth-child(1) td.filtre');

c'est quoi ce sélecteur ?
je ne vois aucune classe ".tablerow" ni aucun div dans ta table !

Filtrer les <TD> dont le contenu commence par un valeur saisie

jQuery

Vue hybride

Discussions similaires

Partager

Partager