Comment créer une liste déroulante?

listes déroulantes dans des cellules d'un tableau

17 mars 2020 à 12:26:19

Bonjour,

Je souhaite faire des listes déroulantes dans certaines cases du tableau puis en fonction de chaque choix établi les prix changent. Pour qu'à la fin un calcul soit effectué en fonction de chaque prix.

En fait je veux faire comme fait excel mais en HTML+CSS+PHP (si c'est la bonne méthode)

Mais je suis preneur si il existe une méthode plus simple comme importer le tableau excel et ses fonctions dans une page html.

Pour l'instant mon seul travail fait est le tableau.

Ci-dessous mon code HTML puis mon code CSS

Merci d'avance pour votre attention et comprenez bien que je suis un total novice.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
        <link rel="stylesheet" href="tableau_tarif" /><title>Tarifs</title>
</head>
<body>
<table>
  <tr>
    <th colspan="3"><H1>Tarifs</H1></th>
  </tr>
  <tr>
    <td colspan="2">Nombre de personnes</td>
    <td>10</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp</td>
    <td>Prix par</br>
    personne
  </tr>
  <tr>
    <td>Pack EVC</td>
    <td>non</td>

html {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(96,57,19);
  letter-spacing: 1px;
  font-size: 0.8rem;
}

td, th {
  border: 1px solid rgb(204,153,51);
  padding: 10px 20px;
}

th {
  background-color:;
}

td {
  text-align: center;
}
caption {
  padding: 10px;
}

 

    <td>0 €</td>
  </tr>
  <tr>
    <td colspan="3">&nbsp</td>
  </tr>
  <tr>
    <td>Panier barbecue</td>
    <td>non</td>
    <td>0 €</td>
  </tr>
  <tr>
    <th colspan=3>Activité de groupe</th>
  </tr>
  <tr> 
    <td>Parcours accrobranche</td>
    <td>non</td>
    <td>0 €</td>
  </tr>
  <tr>
    <td>Paintball</td>
    <td>non</td>
    <td>0 €</td>
  </tr>
  <tr>
    <td>Combat d'archer</td>
    <td>non</td>
    <td>0 €</td>
  </tr>
    <tr>
    <td>Olympiades</td>
    <td>2 Olympiades</td>
    <td>14 €</td>
  </tr>
  <tr>
    <td>BodyBulle</td>
    <td>Session de 30 </td>
    <td>11 €</td>
  </tr>
    <tr>
    <td colspan="2">&nbsp</td>
  </tr>
    <th colspan="3">Pour le futur marié</th>
  </tr>
  <tr> 
    <td>Faux saut à l'élastique</td>
    <td>non</td>
    <td>0 €</td>
  </tr>
  <tr> 
    <td> Bungy Ejection</td>
    <td>oui</td>
    <td>9 €</td>
  </tr>
  <tr>
    <td colspan="3">&nbsp</td>
  </tr>
  <tr> 
    <td colspan="2"> Total personne sans remise</td>
    <td>25,00 €</td>
  </tr>
  <tr> 
    <td colspan="2">  Remise multi-activité (5% sur les activités)</td>
    <td>1,25 €</td>
  <tr> 
    <td colspan="2">Remise Groupe (+ 10 personnes : 10%)</td>
    <td>2,38 €</td>
  </tr>
  <tr> 
    <td colspan="2">Remise Futur marié (Activité et pack offert)</td>
    <td>0 €</td>
  </tr>
  <tr> 
    <td colspan="2"><b>Total par personne avec remises</b></td>
    <td><b>21,38 €</b></td>
  </tr>
  <tr> 
    <td>&nbsp</td>
    <td><b>Total groupe</b></td>
    <td><b>222,75 €</b></td>
  </tr>
</table>
</body>
</html>

-
Edité par GaetDuss 18 mars 2020 à 12:33:16

Lartak

17 mars 2020 à 12:41:39

Bonjour.

Pour commencer, il te faudra faire un formulaire si tu veux que le PHP puisse traiter les données.

Ensuite, si tu veux qu'un prix change lorsque l'utilisateur sélectionne une valeur d'une liste déroulante avant d'avoir soumis le formulaire, il te faudra utiliser du JavaScript, car je suppose que c'est le prix final que tu vas faire calculer au niveau PHP.

Sinon, donnes plus de précisions sur le déroulement du processus en rapport avec les langages.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

GaetDuss

17 mars 2020 à 14:44:20

Je pensais qu'à partir d'un tableau créé en HTML on pouvait par la suite

- Faire un liste déroulante dans les cellules voulues (en HTML+CSS?)

- Cliquer sur le choix voulu (Toujours HTML+CSS?)

- Que les prix changent en fonction des choix faits (Là c'est le langage JavaScript?)

- Qu'un calcul soit effectué automatiquement (et là, la partie PHP?)

Je t'avoue que je ne sais pas quels langages utiliser...

Sur la capture écran je veux, par exemple, pouvoir :

- choisir "3 olympiades"> le prix doit ainsi passer à 19e

- choisir "oui" dans faux saut à l'élastique> le prix doit ainsi passer à 9e

le total sans remise et avec remises changent donc également automatiquement ou par un bouton calculer à la fin de chaque choix effectué

Lartak

17 mars 2020 à 14:48:33

Pour créer les listes déroulantes, un select pour chacune d'entre elles.

Si tout doit se modifier au fur et à mesure des choix de l'utilisateur, dans ce cas là il te faut utiliser du JavaScript.

Puis faire les calculs et les modifications dans le HTML, avec le JavaScript également.

-
Edité par Lartak 17 mars 2020 à 14:49:57

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

GaetDuss

17 mars 2020 à 15:35:25

Ok j'ai jamais utilisé JavaScript et ça m'a l'air compliqué mais je vais chercher des cours sur internet.

select pour les listes déroulantes marche :-)

Merci pour ton aide

Lamecarlate

17 mars 2020 à 21:47:41

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Tableau)

Pas d'aide concernant le code par MP, le forum est là pour ça :)