18 mai 2017 à 14:19:51

Bonjour à tous !

Je cherche à intégrer dans mon tableau une fonction de recherche et une sélection par menu déroulant.

J'ai chercher un peut partout sans trouvé chaussure à mon pied...

Si quelqu'un peut me donné un coup de pouce sa serai sympa !

Je cherche surtout un script avec Hide / Show pour le menu déroulant

<select id="SelectorRollsProfil">
<option id="OptALLProfils">-</option>
<option id="OptOTS">OTS</option>
<option id="OptOTY1">OTY1</option>
<option id="OptOTW">OTW</option>
<option id="OptROUTIER">ROUTIER</option>
<option id="OptOTZL">OTZL</option>
<option id="OptOTTRAC">OTTRAC</option>
<option id="OptOTR1">OTR1</option>
<option id="OptOTT">OTT</option>
<option id="OptAE73">AE73</option>
<option id="OptAE74">AE74</option>
<option id="AE77">AE77</option>
<option id="OptAMP35">AMP35</option>
<option id="OptAL37">AL37</option>
<option id="OptBLT03">BLT03</option>
<option id="OptBL210">BL210</option>
<option id="OptSFI">SFI</option>
<option id="OptSFII">SFII</option>
<option id="OptSFIII">SFIII</option>
<option id="OptLIGNE">LIGNE</option>
<option id="OptWGC28">WGC28</option>
<option id="OptWTR69">WTR69</option>
</select>

Merci à vous

-
Edité par Flavv G 18 mai 2017 à 14:25:24

yoan.tls

18 mai 2017 à 14:32:23

Bonjour,

C'est pas trop clair comme tu expliques, tu n'aurais pas un début de code à montrer ? un exemple ?

Une fonction recherche et un select ? Tu veux proposer une recherche parmi les options du select ? Et dans tout sa, le tableau, il fais quoi ?

Benzouye

18 mai 2017 à 14:44:18

Bonjour,

Tu souhaites qu'en fonction de l'élément choisi dans le <select> un tableau de la page soit filtré selon ce choix ?

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Flavv G

18 mai 2017 à 15:04:26

Merci de vos réponses

Pour faire simple voici un exemple

<!DOCTYPE html>
<html>
<head>
<style>
table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;table-layout: fixed;}
th {border: 1px solid red;background-color: red;color: #fff;text-align: center;padding: 8px;}
td {border: 1px solid red;text-align: left;padding: 8px;}
tr:nth-child(even) {background-color: #dddddd;}
</style>
</head>
<body>

<table>
  <tr>
    <th>Colonne 1</th>
    <th>Colonne 2</th>
    <th>Colonne 3</th>
  </tr>
  <tr>
    <td><select id="SelectorRollsColors">
<option value="0">-- choisissez --</option>
<option value="Bleu">Bleu</option>
<option value="Rouge">Rouge</option>
<option value="Vert">Vert</option>
</select></td>
    <td>-</td>
    <td>-</td>
  </tr>
  <tr>
    <td>Rouge</td>
    <td>Francisco</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Rouge</td>
    <td>Roland</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Vert</td>
    <td>Helen</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Rouge</td>
    <td>Yoshi</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Bleu</td>
    <td>Giovanni</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Bleu</td>
    <td>Giovanni</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Vert</td>
    <td>Giovanni</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

Ce que je veux c'est par exemple si je sélectionne "Rouge", les lignes "TR" avec "Rouge" reste et les autres disparaissent (Hide/show)

-
Edité par Flavv G 18 mai 2017 à 15:07:24

Benzouye

18 mai 2017 à 15:14:34

Tu veux le faire en JavaScript pur ou en utilisant un framework (genre jQuery) ?

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Flavv G

18 mai 2017 à 15:16:06

Honnêtement peut importe tant que ça fonctionne :-)

yoan.tls

18 mai 2017 à 15:18:36

Tu veux un truc du style ?

https://codepen.io/anon/pen/wdEVwG

EDIT: j'ai pas vue pour le hide/show. Je te conseil alors de sortir ton select du tableau.

-
Edité par yoan.tls 18 mai 2017 à 15:20:36

Flavv G

18 mai 2017 à 15:23:31

Oui plus ou moins mais la ligne complète pas juste la 1ere colonne

Merci :-)

Benzouye

18 mai 2017 à 15:31:11

https://codepen.io/anon/pen/oWPKEv

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Flavv G

18 mai 2017 à 15:37:05

C'est exactement ce que je voulais !

Merci à toi Benzouye ! Et merci également à yoan.tls !

-
Edité par Flavv G 18 mai 2017 à 15:43:24

Benzouye

18 mai 2017 à 15:52:21

J'ai corrigé le codepen pour pouvoir revenir à la liste complète

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Flavv G

18 mai 2017 à 16:02:39

Benzouye a écrit:

J'ai corrigé le codepen pour pouvoir revenir à la liste complète

Je viens de voir ça merci à toi !

horacejounangtchoua

19 mai 2022 à 19:45:53

ancien

AbcAbc6

19 mai 2022 à 19:50:30

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

Forums des Zéros

Fonction de recherche dans tableau HTML / CSS

Déterrage

Fonction de recherche dans tableau HTML / CSS

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs