Discussion :

[ParisElliot]

Bonjour à tous,

Je viens vers vous car je bloque depuis un petit moment sur un script que je souhaite modifier.

Alors voilà : Je souhaite effectuer une recherche dans un tableau. Le script que j'ai fonctionne, mais la recherche s'effectue sur la première colonne uniquement. Je voudrais cependant qu'elle s'effectue sur la première colonne ET sur un autre champ de la base de données qui ne sera pas affiché dans le tableau.

Pour être plus clair, voici mon tableau :


Au dessus de celui-ci, j'ai mon input de recherche dont voici le code :

Code html :

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

<input class="inputrecherche" type="text" placeholder="Rechercher une ville ou un département..." id="myInput" onkeyup="myFunction()">

Et voici mon script :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
           if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
               tr[i].style.display = "";
            } else {
             tr[i].style.display = "none";
              }
          }
    }
 }

Pour le moment tout fonctionne. Mais comme indiqué plus haut, je désire l'adapter pour qu'il recherche aussi par département (il est présent un champ de la base de données).

Si vous avez des idées, n'hésitez pas car je plante vraiment sur ce coup...

Merci d'avance à tous !

[SpaceFrog]

rajoute un data-dept sur le td[0]
tu pourras ainsi tester

Code :

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

 if (td.attribute("data-dept") ==  ???) {

[ParisElliot]

Bonjour et avant tout, merci pour ton message !

Cependant, je n'ai pas précisé que je ne suis pas vraiment "calé" en Javascript, du coup, peux-tu m'en dire plus ou du moins, m’expliquer plus précisément ?

Merci d'avance !

[SpaceFrog]

quand tu construis ton tableau coté serveur ...
rajoute un attribut data-dept

tes td ressembleront à :

Code :

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

<td data-dept="51">DUNKERQUE</td>

ainsi de la même façon que tu recherches sur le innerHTML du td[0]
tu feras la même recherches sur

Code :

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

1
2
recherchedept = 51;
if (td.attribute("data-dept") ==  recherchedept )

[ParisElliot]

Merci beaucoup ça fonctionne !

[NoSmoking]

Bonjour,
de plus avec la méthode proposée par SpaceFrog la recherche peut se faire rapidement en utilisant document.querySelectorAll en passant le sélecteur [data-dept="???"]

Code :

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

1
2
3
var recherchedept = 51;
var selecteur = "[data-dept='" + recherchedept +"']";
var oElements = document.querySelectorAll(selecteur);