Sujet Précédent Sujet Suivant

Ajout ligne tableau + supression ligne

Fermé
Aremi - 21 févr. 2023 à 16:20
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 - 22 févr. 2023 à 13:07

Bonjour,

J'essaie de créer un fichier sous sheet ou vais pouvoir ajouter des lignes dans mon tableau. 

J'ai un bouton ajouter qui m'ouvre une boîte de dialogue. Lorsque j'appuie sur ajouter dans ma boite de dialogue tout mes inputs sont inséré dans la dernière ligne de mon tableau. J'aimerai qu'il n'y ai que mes inputs date et text. De plus, j'ai fais un select qui ne rentre pas dans le tableau. 

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        padding: 0 0.5rem; 
        color: #333;
        font-family: Roboto, Arial, sans-serif;
        overflow: hidden;
      }
      p {
        margin: 0.8rem 0 0.3rem;
      }
      .annuler {
        display: inline-block;
        margin-top: 1rem;
        font-size: 0.88rem;
        color: #888;
        cursor: pointer;
      }
      .annuler:hover {
        text-decoration: underline;
      }
      input[type="text"] {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 1rem;
        padding: 0.6rem 0.7rem;
        background: #f3f3f3;
        color: #444;
        border: none;
        font-size: 1.08rem;
        border-radius: 0.4rem;
      }
       input[type="date"] {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 1rem;
        padding: 0.6rem 0.7rem;
        background: #f3f3f3;
        color: #444;
        border: none;
        font-size: 1rem;
        border-radius: 0.4rem;
      }
      input[type="button"] {
        display: block;
        width: 100%;
        padding: 0.7rem 0 0.6rem;
        border: none;
        background: #001b5b;
        color: #fff;
        font-size: 1.15rem;
        cursor: pointer;
        border-radius: 0.4rem;
      }
      input[type="button"]:hover {
        background: #001b5b;
      }
    </style>
  </head>
  <body>

   <p>Date</p>
    <input type="date" name="date" value="">

    <p>CMS</p>
    <input type="text" name="CMS" value="">

    <p>Désignation</p>
    <input type="text" name="designation" value="">

    <p>Fournisseur</p>
    <input type="text" name="fournisseur" value="">

    <p>LP</p>
    <input type="text" name="LP" value="">

    <p>OTD</p>
    <input type="text" name="OTD" value="">


    <p>Choisir le type de manquant</p>
    <select id="type" name="form_manquant">
      <option value="Manquant Mag">Manquant Mag</option>
      <option value="Manquant Mag RP">Manquant Mag RP</option>
      <option value="Stock critique">Stock critique</option>
      <option value="Manquant BDL">Manquant BDL</option>
       <option value="Manquant BDL RP">Manquant BDL RP</option>
      <option value="Qualité">Qualité</option>
      <option value="Service partiel">Service partiel</option>
      <option value="ZRV">ZRV</option>
      <option value="Pas de R en cours">Pas de R en cours</option>
    </select>
    </p>

    <p>Commentaire logisitcien</p>
    <input type="text" name="OTD" value="">
    <input type="button" value="Ajouter" onclick="ajouter()">

    <span class="annuler" onclick="google.script.host.close()">Annuler</span>

    <script>

      function ajouter() {
        const inputs = document.querySelectorAll('input');
        let tab = [];

        // Récupération des valeurs
        for (const input of inputs)  {
                  tab.push(input.value);
        }

        // Si tous les champs sont vides
        if (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }

        // Vider les champs
        inputs.forEach(input => input.value = '');

        // Envoi dans la feuille
        google.script.run.ajouterLigne(tab);
      }
    </script>
  </body>
</html>


Windows / Chrome 110.0.0.0

A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
Modifié le 22 févr. 2023 à 10:09

Bonjour,

En fait...  ta question concerne le JAVASCRIPT et non le HTML  ...

Juste cette parti : 

      function ajouter() {
        const inputs = document.querySelectorAll('input');
        let tab = [];

        // Récupération des valeurs
        for (const input of inputs)  {
                  tab.push(input.value);
        }

        // Si tous les champs sont vides
        if (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }

        // Vider les champs
        inputs.forEach(input => input.value = '');

        // Envoi dans la feuille
        google.script.run.ajouterLigne(tab);
      }

En lisant le code, on comprend qu'ils prends TOUS les input  et aucun SELECT ...

As tu essayé de le modifier ?

Si oui, qu'as tu essayé ... montre nous...

PS: je déplace la discussion dans le forum Javascript.
0
Réponse 2 / 3
Aremi31200 Messages postés 2 Date d'inscription mardi 21 février 2023 Statut Membre Dernière intervention 22 février 2023
22 févr. 2023 à 10:51

Effectivement, je me suis trompé. Je suis novice je vous prie de m'excuser. 

En effet si je remplace l2 'input' par 'select cela rempli dans mon tableau que le select. Ici je voudrais que ça fasse les deux. 

Merci
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
22 févr. 2023 à 11:13

Oui j'ai bien compris ce que tu veux obtenir et je pourrais 'techniquement' te l'écrire ....

Mais ... toi .. comprends tu le code que tu nous montres ?

C'est essentiel pour qu'ensuite tu sois en mesure de l'adpater à tes besoins...

Car le principal (et le principe ici..) c'est qu'on t'aide à le faire ... pas qu'on le fasse à ta place...

0
Réponse 3 / 3
Aremi31200 Messages postés 2 Date d'inscription mardi 21 février 2023 Statut Membre Dernière intervention 22 février 2023
22 févr. 2023 à 11:37

Je comprend tout à fais le raisonnement, en regardant le code voici ce que j'ai fais et qui fonctionne.

je retiens les valeurs de mon formulaire grâce à CONST puis les insères grâce au 3 push que j'ai réalisé. 

Je me demande est-ce que je pourrais simplifier ces boucles ? 

 function ajouter() {
        const selects = document.querySelectorAll('select'); 
        const inputs = document.querySelectorAll('input[type="text"]');
        const dates = document.querySelectorAll('input[type="date"]');
        let tab = [];

        for (const date of dates)  {
                  tab.push(date.value);
        }

        for (const input of inputs)  {
                  tab.push(input.value);
        }

        // Récupération des valeurs
        for (const select of selects)  {
                  tab.push(select.value);
        }
        

        // Si tous les champs sont vides
        if (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }

        // Vider les champs
        inputs.forEach(input => input.value = '');

        // Envoi dans la feuille
        google.script.run.ajouterLigne(tab);
      }
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
22 févr. 2023 à 13:07

C'est pas mal, tu pourrais être affranchir des boucles en ciblant uniquement le premier item de chacun de tes const. (Vu que tu n'as qu'un seul champ à traiter et pas plusieurs du même type à chaque fois)

Par exemple pour ton input date

tab.push(date[0].value);
1

Discussions similaires

Que veut dire "correspondant occupé" lors d'un appel ?
veroaaa -
Pat -

10 réponses
Qui sont les personnes dans mon ajout rapide de Snapchat ?
lobino68 -
m_manolo25 -

21 réponses
On me voit connecté sur facebook alors que je n'y suis pas
MrTheMolode -
lily -

5 réponses