Je travaille actuellement à ajouter des champs de saisie input via un bouton, le javascript fonctionne mais l'apparition des inputs ne se font pas au bon endroit.
<script type="text/javascript" >
var div = document.getElementById('champs');
function addInput(nam){
var input = document.createElement("input");
input.name = name;
div.appendChild(input);
}
function addField() {
addInput("nom[]");
addInput("unite[]");
addInput("donnee[]");
div.appendChild(document.createElement("br"));
</script>
Actuellement, au lieu de mettre les inputs à la suite en respectant la hierarchie tr puis td, il me le met tout au dessus de mon formulaire, en dehors de mon div...
Le Javascript fonctionne très bien, ce qui ne convient pas, c'est où apparaissent les 3 nouveaux input.
le tr et td font partie d'un tableau, l'objectif et qu'au clic du bouton 'ajouter une ligne', que les 3 nouveaux input s'intègrent proprement dans le tableau.
Peut-être que ma demande vous paraît novice mais actuellement je bloque sur ce point.
C'est normal de ne pas arriver lorsqu'on débute, ne t'en fait pas.
Je comprends ta demande, mais avant de t'aider, je vais souligner des petites choses que tu fais mal. (et accessoirement je t'invite à lire le cours javascript d'openclassrooms qui t'apprendra à faire ce genre de chose.
Ce qui ne va pas :
La div .champ est superflu. En mettant la classe .champ dans le tr donnera le même effet.
Lorsque tu nous fournis du code, évite les informations portant à confusion, comme le fait de ne pas mettre les balises table par exemple.
La valeur de l'attribut name ne doit pas contenir de caractères spéciaux ! Tu pourrais avoir des problèmes lors du traitement.
Si tu souhaites plus tard traiter les données entrées par l'utilisateur, tu devras mettre tout tes input dans une balise form.
Deux input dans le DOM ne doivent PAS avoir le même attribut name. Auquel cas tu auras une erreur lors du submit.
Enfin, pourquoi mettre des input dans un tableau ? Tu veux faire un tableau type Excel, où les cellules sont modifiables ? Si ce n'est pas le cas, n'utilise pas de tableau HTML pour faire ça.
Ceci étant dit, on peut passer a la solution. Admettons que tu es une bonne raison de mettre des input dans un table
Tout d'abord, qu'est-ce que l'on veut faire ? On veut que, lorsque l'on appuie sur un bouton, un bloc comme celui ci-dessous soit ajouté au tableau. Comment sélectionner ce tableau ? Avec un identifiant. Maintenant que l'on sait ce qu'on veut faire, on peut se lancer.
Tout d'abord on créer un bouton que l'on va nommer avec l'identifiant ajouterChamp. On va détecter le clique avec la méthode addEventListener("click", e => { ... }) sur ce bouton. Dans le callback de cette méthode (la fonction représenté par e => { ... }) on va y mettre le code qui va créer et placer nos champs. Il va aussi falloir sélectionner le tableau (pour qu'on puisse y ajouter du contenu), nommons le avec l'identifiant tableau. Au boulot !
// On récupère nos différents éléments (bouton et tableau)
let ajouterChamp = document.getElementById("ajouterChamp"),
tableau = document.getElementById("tableau")
// le numéro de la ligne, ici on initialise a 1 car j'ai mis une ligne d'exemple
let l = 1
// Lorsqu'on clique sur le bouton
ajouterChamp.addEventListener("click", e => {
e.preventDefault() // on empêche l'envoie des données
/**
* on créer tout nos éléments, à savoir :
* - Le tr (avec la classe "champ")
* - Le td
* - Les input avec leur nom
**/
let newTr = document.createElement("tr")
newTr.className = "champs"
// on boucle 3 fois pour créer 3 input
for(let k = 0; k < 3; k++) {
let newTd = document.createElement("td")
let newInput = document.createElement("input")
newInput.name = "input" + k+1 + "td" + l // name qui sera unique
// on met le nouvel input créer dans le nouveau td
newTd.appendChild(newInput)
newTr.appendChild(newTd)
}
// enfin on met le tr dans le tableau
tableau.appendChild(newTr)
})
Je te mets également à disposition un codepen pour que tu puisses tester ça (faudrait vraiment que je pense à migré sur jsfiddle, je suis entrain de polluer les serveurs de codepen).
Ton problème principal, est que tu ne faisais qu'ajouter les inputs, donc sémantiquement au niveau HTML, tes inputs ne pouvaient pas s'afficher correctement au niveau structure HTML.
Il te fallait aussi générer une ligne de tableau pour les nouveaux inputs, soit le tr et les td.
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.
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.