Bonjour,

je vous propose ce bout de code qui permet de récupérer des données présentes dans une table html à partir de la saisie dans un input et de ces sélecteurs.

Il est basé sur la fonction filter de jquery.

Je souhaite récupérer le nombre d'enregistrements affichés.

je saisie : blouson et je n'arrive pas à récupérer le nombre de résultats affichés.

Au mieux je parviens à compter le nombre de caractères saisis mais pas le nombre de résultat, vous l'aurez compris.

$("#myInput").on("keyup", function() {
	var value = $(this).val().toLowerCase();
	
	$("#MySearch tr").filter(function() {
		$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
		if (value !== '') { console.log(value.length);
			$(this).css("background-color", "#E6FFB5");
			$(this).hover(function(){
				$(this).css("background-color", "#fff");
			}, function(){
					$(this).css("background-color", "#E6FFB5");
				}
			);

merci de votre aide

-
Edité par Nicos1235 7 novembre 2023 à 14:42:21

Bonjour. La fonction filter() sert à filtrer dans ton cas les "tr" contenus dans ton élément avec l'id "MySearch".

1. Pour filtrer, il faut que la fonction dans filter() retourne un booléen (afin de savoir si la valeur du tableau est conservée ou non).

2. filter() retourne les résultats. Il suffit donc de les compter.

Voici un exemple simple du fonctionnement, à adapter :

const clothes = ['chaussettes', 't-shirt', 'blouson', 'jean', 'blouson']

const result = clothes.filter(cloth => {
    if (cloth === 'blouson') {
       return true
    } else {
       return false
    }
})
// result = ['blouson', 'blouson']
console.log(result.length) // donne 2

Le code peut se simplifier ainsi, mais je l'ai écrit de cette façon pour bien montrer qu'on doit retourner true ou false :

const result = clothes.filter(cloth => cloth === 'blouson')

-
Edité par Diatomée 29 novembre 2023 à 11:18:07

bonjour et merci,

je tourne et n'arrive pas a remplir const clothes.

Je regarde avec la fonction find()

-
Edité par Nicos1235 30 novembre 2023 à 13:08:11

Bonsoir,

je ne parviens pas remplir le tableau const clothes

j'essaie avec $("#MySearch tr"); mais non !

Cela me donne le nombre de résultat total mais pas le nombre de résultats correspond

-
Edité par Nicos1235 2 décembre 2023 à 20:19:02

Bonsoir,

Quel est le HTML correspondant?  Et pour quelles raisons utiliser jQuery ??

le html :

<tbody id="MySearch">
<tr class="classe1">
<td>
rrrrr
</td>
<td>dddddd</td>
</tr>
<tr class="classe2">
<td>
tttt
</td>
<td>dddddd</td>
</tr>
</tbody>

merci

Bonsoir,

>> Je souhaite récupérer le nombre d'enregistrements affichés.

Autrement dit tu souhaites récupérer le nombre d’élément <td> dans ton tableau?  Si oui je te propose : 

        const MySearch = document.getElementById('MySearch');
        const td = MySearch.getElementsByTagName("td");
        console.log(td);  //  affiche HTMLCollection
        console.log(td.length); // affiche 4, soit le nombre d'élément td du tableau

https://developer.mozilla.org/fr/docs/Web/API/Element/getElementsByTagName

Si je n'ai pas bien compris la problématique merci de préciser ce qui est recherché.

Bonjour et merci

Je souhaite récupérer le nombre de résultats trouvés par la fonction filter.

C'est à dire actuellement j'ai 16 résultats. Si je saisi "chemise" je souhaite trouvé le nombre de résultat à 2, puisque j'en ai 2.

Aujourd'hui je n'arrive à récupérer que le nombre total et pas le résultat de ma recherche.

J'ai compris le message de Diatomée mais je ne parviens pas à remplir le tableau.

En fait, je pense que je dois essayer de récupérer le nombre de tr issu de la recherche

Merci bien

-
Edité par Nicos1235 3 décembre 2023 à 18:16:55

Bonjour.

Le tableau clothes de ma démonstration était juste là pour représenter les éléments de ta table HTML. À ce que je comprends, tu as quelque chose comme ça :

<table>
    <tr>
        <td>blouson</td>
        <td>slip</td>
    </tr>
    <tr>
        <td>jupe</td>
        <td>chapeau</td>
    </tr>
    <tr>
        <td>lunettes</td>
        <td>blouson</td>
    </tr>
</table>

Tu peux donc obtenir clothes ainsi :

const clothes = [...document.querySelectorAll('td')].map(td => td.textContent)

Ceci permet d'obtenir tous les td sous forme de tableau, pour pouvoir utiliser map ensuite :

[...document.querySelectorAll('table td')]

Si tu souhaites les td d'un tableau spécifique, il faudra le mentionner. Il s'agit d'un sélecteur CSS.

La suite du code permet d'extraire le texte d'un élément td.

Si tu peux te passer du jQuery (et en principe tu peux), alors passe-t-en.

Pour récapituler, voici la totalité du code :

const search = 'Blouson'
const nb = [...document.querySelectorAll('td')]
    .map(td => td.textContent)
    .filter(cloth => cloth.toLowerCase() === search.toLowerCase())
    .length

-
Edité par Diatomée 4 décembre 2023 à 19:54:38