Bonjour !

Pourrais-je avoir votre avis sur cette situation ?

Voilà, j'ai un tableau en HTML ou j'aimerais recopier beaucoup de fois une liste déroulante en Select / option.

Comme on me l'a sympathiquement conseillé, ça semble peu faisable en HTML directement. Donc, est-ce possible de créer un template en JavaScript pour cela et de n'appeler que le nom de l'objet/classe pour éviter d'avoir un code kilométrique en HTML ?

Est-ce possible d'intégrer cette liste déroulante en JS dans le code HTML ou est-ce préférable de construire tout le tableau en JS ?

Par après, je devrais pouvoir récupérer la valeur des choix dans les instances de listes déroulantes générées.

Merci pour votre temps et vos conseils avisés  !

Bonne journée à tous !

Antoine.

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: jscript;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction. En image cela donne :

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

Domi65 a écrit:

C'est faisable facilement, mais il faudrait que tu nus donne le code HTML de ton tableau avec le select dans une des cellules.

Bonjour Domi !

Merci pour la réponse, je viens de voir que mon message a été modéré car je n'ai pas coloré le texte en mode Code. Merci pour ce rappel, c'est grâce aux modérateurs que ce forum reste lisible

Voici donc le code avec le tableau et une liste "Select" dans la première case. Il faudrait répéter cette liste dans les cases juste en dessous.

Merci pour ton aide !

    <table id="TableRecette" style="width: 859px; height: 156px;" title="TableRecette"

      border="1">
      <tbody>
        <tr>
          <!-- Ligne titre --> <th><b>Référence</b></th>
          <!-- Header du tableau --> <th><b>Titre recette</b></th>
          <th><b>Composant (Français)</b></th>
          <th><b>Origine</b></th>
          <th style="width: 105.267px;"><b>Quantité (%)</b></th>
        </tr>
        <tr>
          <!-- Ligne suivante -->
          <td style="width: 85.817px; text-align: center;" rowspan="20">
            <!-- Case pour afficher numéro recette --> <input name="Numéro recette"

              value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Nom de recept:"

              placeholder="R00" required="required" maxlength="3" autocomplete="on"

              size="10" type="text"><br>
          </td>
          <td style="margin-left: 85px; width: 321.583px; text-align: center;" rowspan="20"

            colspan="0">
            <!-- Case pour afficher nom recette --> <input name="Numéro recette"

              value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Nom de recept:"

              placeholder="R00" required="required" maxlength="3" autocomplete="on"

              size="60" type="text"> </td>
          <td style="width: 177.117px;">
            <!-- Colonne ingrédient -->
            <select name="Ingredient" id="Ingredient_1">
              <!-- Textbox -->
              <option value="Aucun">Aucun</option>
              <!--  -->
              <option value="Riz biologique">Riz biologique</option>
              <!-- Silos -->
              <option value="Riz conventionnel">Riz conventionnel</option>
              <!-- Silos -->
              <option value="Maïs biologique">Maïs biologique</option>
              <!-- Silos -->
              <option value="Maïs conventionnel">Maïs conventionnel</option>
              <!-- Silos -->
              <option value="Parboiled conventionnel">Parboiled conventionnel</option>
              <!-- Silos -->
              <option value="Parboiled biologique silo">Parboiled biologique
                silo</option>
              <!-- Silos -->
              <option value="Sel biologique">Sel biologique</option>
              <!-- Cartons/Sacs -->
              <option value="Huile biologique">Huile biologique</option>
              <!-- Cubitainer -->
              <option value="Maïs pellet biologique">Maïs pellet biologique</option>
              <!-- Bigbags -->
              <option value="Maïs popcorn conventionnel">Maïs popcorn
                conventionnel</option>
              <!-- Bigbags -->
              <option value="Riz bio européen 1561">Riz bio européen 1561</option>
              <!-- Bigbags -->
              <option value="Parboiled biologique bigbag">Parboiled biologique
                bigbag</option>
              <!-- Silos -->
              <option value="Pellet protéïnes">pellet protéïnes</option>
              <!-- Cartons/Sacs -->
              <option value="Pellet de poids chiche">Pellet de poids chiche</option>
              <!-- Cartons/Sacs -->
              <option value="Lin biologique">Lin biologique</option>
              <!-- Cartons/Sacs -->
              <option value="Quinoa biologique">Quinoa biologique</option>
              <!-- Cartons/Sacs -->
              <option value="Sesame biologique">Sesame biologique</option>
              <!-- Cartons/Sacs -->
              <option value="Amaranth biologique">Amaranth biologique</option>
              <!-- Cartons/Sacs -->
              <option value="Sarrasin biologique">Sarrasin biologique</option>
              <!-- Cartons/Sacs -->
              <option value="Millet biologique">Millet biologique</option>
              <!-- Cartons/Sacs -->
              <option value="Romarin biologique">Romarin biologique</option>
              <!-- Cartons/Sacs -->
              <option value="Chia biologique">Chia biologique</option>
              <!-- Cartons/Sacs -->
              <option value="Riz noir biologique">Riz noir biologique</option>
              <!-- Cartons/Sacs -->
              <option value="Graines de chanvre biologique">Graines de chanvre
                biologique</option>
              <!-- Cartons/Sacs -->
            </select>
          </td>
          <td>Silos<br>
          </td>
          <td><input style="width: 200px" name="Quantité 1" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp1.Quantity:"

              placeholder="Quantité 1" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr>
          <td>
            <!-- Colonne ingrédient -->
            <select name="Ingredient_2" id="Ingredient_2">
              <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>Silos </td>
          <td><input style="width: 200px" name="Quantité 2" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp2.Quantity:"

              placeholder="Quantité 2" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr style="height: 25.2px;">
          <td>
            <!-- Colonne ingrédient -->
            <select name="Ingredient_3" id="Ingredient_3">
              <!-- Liste suivante ###########################################################-->

           </select>
          </td>
          <td>Silos </td>
          <td><input style="width: 200px" name="Quantité 3" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp3.Quantity:"

              placeholder="Quantité 3" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr>
          <td>
            <!-- Colonne ingrédient -->
            <select name="Ingredient_4" id="Ingredient_4">
              <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>Silos</td>
          <td><input style="width: 200px" name="Quantité 4" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp4.Quantity:"

              placeholder="Quantité 4" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr>
          <td style="width: 177.117px;">
            <!-- Colonne ingrédient -->
            <select name="Ingredient_5" id="Ingredient_5">
              <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>
            <select name="Origine_5" id="Origine_5">
              <option value="Aucun">Aucun</option>
              <option value="Bigbag / Aspiration">Bigbag / Aspiration</option>
              <option value="Carton / Sac">Carton / Sac</option>
            </select>
          </td>
          <td><input style="width: 200px" name="Quantité 5" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp5.Quantity:"

              placeholder="Quantité 5" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr>
          <td>
            <!-- Colonne ingrédient -->
            <select name="Ingredient_6" id="Ingredient_6">
              <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>
            <select name="Origine_6" id="Origine_6">
              <option value="Aucun">Aucun</option>
              <option value="Bigbag / Aspiration">Bigbag / Aspiration</option>
              <option value="Carton / Sac">Carton / Sac</option>
            </select>
          </td>
          <td><input style="width: 200px" name="Quantité 6" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp6.Quantity:"

              placeholder="Quantité 6" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr style="height: 25.2px;">
          <td>
            <!-- Colonne ingrédient -->
            <select name="Ingredient_7" id="Ingredient_7">
              <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>
            <select name="Origine_7" id="Origine_7">
              <option value="Aucun">Aucun</option>
              <option value="Bigbag / Aspiration">Bigbag / Aspiration</option>
              <option value="Carton / Sac">Carton / Sac</option>
            </select>
          </td>
          <td><input style="width: 200px" name="Quantité 7" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp7.Quantity:"

              placeholder="Quantité 7" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr>
          <td>
            <!-- Colonne ingrédient -->
            <select name="Ingredient_8" id="Ingredient_8">
              <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>
            <select name="Origine_8" id="Origine_8">
              <option value="Aucun">Aucun</option>
              <option value="Bigbag / Aspiration">Bigbag / Aspiration</option>
              <option value="Carton / Sac">Carton / Sac</option>
            </select>
          </td>
          <td><input style="width: 200px" name="Quantité 8" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp8.Quantity:"

              placeholder="Quantité 8" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
          <!-- ligne --> </tr>
        <tr>
          <td style="width: 177.117px;">
            <!-- Colonne ingrédient -->
            <select name="Ingredient_9" id="Ingredient_9">
               <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>
            <select name="Origine_9" id="Origine_9">
              <option value="Aucun">Aucun</option>
              <option value="Bigbag / Aspiration">Bigbag / Aspiration</option>
              <option value="Carton / Sac">Carton / Sac</option>
            </select>
          </td>
          <td><input style="width: 200px" name="Quantité 9" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp9.Quantity:"

              placeholder="Quantité 9" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr>
          <td>
            <!-- Colonne ingrédient -->
            <select name="Ingredient_10" id="Ingredient_10">
              <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>
            <select name="Origine_10" id="Origine_10">
              <option value="Aucun">Aucun</option>
              <option value="Bigbag / Aspiration">Bigbag / Aspiration</option>
              <option value="Carton / Sac">Carton / Sac</option>
            </select>
          </td>
          <td><input style="width: 200px" name="Quantité 10" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp10.Quantity:"

              placeholder="Quantité 10" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr style="height: 25.2px;">
          <td>
            <!-- Colonne ingrédient -->
            <select name="Ingredient_11" id="Ingredient_11">
                <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>
            <select name="Origine_11" id="Origine_11">
              <option value="Aucun">Aucun</option>
              <option value="Bigbag / Aspiration">Bigbag / Aspiration</option>
              <option value="Carton / Sac">Carton / Sac</option>
            </select>
          </td>
          <td><input style="width: 200px" name="Quantité 11" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp11.Quantity:"

              placeholder="Quantité 11" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr>
          <td>
            <!-- Colonne ingrédient -->
            <select name="Ingredient_12" id="Ingredient_12">
              <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>
            <select name="Origine_12" id="Origine_12">
              <option value="Aucun">Aucun</option>
              <option value="Bigbag / Aspiration">Bigbag / Aspiration</option>
              <option value="Carton / Sac">Carton / Sac</option>
            </select>
          </td>
          <td><input style="width: 200px" name="Quantité 12" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp12.Quantity:"

              placeholder="Quantité 12" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr>
          <td style="width: 177.117px;">
            <!-- Colonne ingrédient -->
            <select name="Ingredient_13" id="Ingredient_13">
              <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>
            <select name="Origine_13" id="Origine_13">
              <option value="Aucun">Aucun</option>
              <option value="Bigbag / Aspiration">Bigbag / Aspiration</option>
              <option value="Carton / Sac">Carton / Sac</option>
            </select>
          </td>
          <td><input style="width: 200px" name="Quantité 13" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp13.Quantity:"

              placeholder="Quantité 13" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr>
          <td>
            <!-- Colonne ingrédient -->
            <select name="Ingredient_14" id="Ingredient_14">
               <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>
            <select name="Origine_14" id="Origine_14">
              <option value="Aucun">Aucun</option>
              <option value="Bigbag / Aspiration">Bigbag / Aspiration</option>
              <option value="Carton / Sac">Carton / Sac</option>
            </select>
          </td>
          <td><input style="width: 200px" name="Quantité 14" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp14.Quantity:"

              placeholder="Quantité 14" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr style="height: 25.2px;">
          <td>
            <!-- Colonne ingrédient -->
            <select name="Ingredient_15" id="Ingredient_15">
              <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>
            <select name="Origine_15" id="Origine_15">
              <option value="Aucun">Aucun</option>
              <option value="Bigbag / Aspiration">Bigbag / Aspiration</option>
              <option value="Carton / Sac">Carton / Sac</option>
            </select>
          </td>
          <td><input style="width: 200px" name="Quantité 15" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp15.Quantity:"

              placeholder="Quantité 15" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
        <tr>
          <td>
            <!-- Colonne ingrédient -->
            <select name="Ingredient_16" id="Ingredient_16">
               <!-- Liste suivante ###########################################################-->

            </select>
          </td>
          <td>
            <select name="Origine_16" id="Origine_16">
              <option value="Aucun">Aucun</option>
              <option value="Bigbag / Aspiration">Bigbag / Aspiration</option>
              <option value="Carton / Sac">Carton / Sac</option>
            </select>
          </td>
          <td><input style="width: 200px" name="Quantité 16" value=":=&quot;Recette_DB&quot;.Produits.Produits[1].Comp16.Quantity:"

              placeholder="Quantité 16" size="10" type="text"><br>
            <!-- Colonne quantité --> </td>
        </tr>
      </tbody>
    </table>

-
Edité par AntoineDruet 23 mai 2022 à 10:13:06

Bonjour.

Pour que tu comprenne la logique, je te donne un exemple simple que je te laisse adapter à ton cas précis, ce qui ne devrait pas être trop difficile :

html

<table id=tableau>
    <tr>
        <th>Colonne1</th><th>Colonne 2</th><th>Colonne 3</th>
    </tr>
    <tr>
        <td> </td><td>col 2</td><td>col 3</td>
    </tr>    <tr>
        <td> </td><td>col 2</td><td>col 3</td>
    </tr>    <tr>
        <td> </td><td>col 2</td><td>col 3</td>
    </tr>
</table>

Le script JS,  va appliquer ces étapes

- Assigner à la constante nommée code le code concernant le select

- Assigner à la constante nommée collonne1 la collection des premières colonnes du tableau (sauf la première)

- parcourir ce tableau par une boucle et à chaque élément (sauf le premier) insérer le code

J'ai choisi de le faire par la méthode innerHTML. Si on veut vraiment respecter les standards, on peut utiliser la méthode insertAdjacentHTML('beforeEnd', code)

P.S.

Dans la mesure où la valeur d'une option est la même que le texte qu'elle contient, elle est inutile.

const code =
'<select>' +
    '<option>machin</option>' +
    '<option>truc</option>' +
    '<option>chose</option>' +
    '<option>bidule</option>' +
'</select>';
const colonne1 = document.querySelectorAll('#tableau tr td:first-child')
for(let i=0, maxi = colonne1.length; i < maxi ; i++)
    colonne1[i].innerHTML = code;

-
Edité par Domi65 23 mai 2022 à 15:26:06