Ajout ligne tableau + supression ligne
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
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
- Ajout ligne tableau + supression ligne
- Partager photos en ligne - Guide
- Tableau word - Guide
- Mètre en ligne - Guide
- Aller à la ligne excel - Guide
- Apparaitre hors ligne instagram - Guide
3 réponses
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.
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
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...
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);
}
