Discussion :

[Soden78]

Bonjour, j'aimerai créer un bouton ajouter une ligne dans mon tableau de mon site.
chaque <td> du tableau sont remplissable par l'auteur puisque c'est dans un <form>
c'est a dire que le tableau est créer comme ça :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
                                                    <table id="ajout" style="text-align:center;  border-collapse: collapse; width:1000px; margin: auto; padding-bottom:10px;">
                                                            <tr>
                                                                <td style="border: 1px solid black;">lieu de la zone</td>
                                                                <td style="border: 1px solid black;">anomalies</td>
                                                                <td style="border: 1px solid black;">photo</td>
                                                            </tr>
                                                            <tr style="border: 1px solid black;">
                                                                <td style="border: 1px solid black;"><textarea name="lieu1" rows=4 cols=40 style="width: 250px; margin-bottom:8px; margin-top:8px; height: 20px;"></textarea></td>
                                                                <td style="border: 1px solid black;"><textarea name="ano1" rows=4 cols=40 style="width: 250px; margin-top:8px; margin-bottom:5px;height: 20px"></textarea></td>
                                                                <td style="border: 1px solid black;"><input type="file" placeholder="oii" name="fichier_upload[]" id="fichier_upload" multiple><br></textarea></td>
                                                            </tr>
                                                            <tr style="border: 1px solid black;">
                                                                <td style="border: 1px solid black;"><textarea name="lieu2" rows=4 cols=40 style="width: 250px;margin-top:8px; margin-bottom:5px;margin-bottom:0; height: 20px"></textarea></td>
                                                                <td style="border: 1px solid black;"><textarea name="ano2" rows=4 cols=40 style="width: 250px;margin-top:8px; margin-bottom:5px; height: 20px"></textarea></td>
                                                                <td style="border: 1px solid black;"><input type="file" placeholder="oii" name="fichierupload[]" id="fichierupload" multiple><br></textarea></td>
                                                            </tr>
                                                            <tr style="border: 1px solid black;">
                                                                <td style="border: 1px solid black;"><textarea name="lieu3" rows=4 cols=40 style="width: 250px;margin-top:8px; margin-bottom:5px; height: 20px"></textarea></td>
                                                                <td style="border: 1px solid black;"><textarea name="ano3" rows=4 cols=40 style="width: 250px;margin-top:8px; margin-bottom:5px; height: 20px"></textarea></td>
                                                                <td style="border: 1px solid black;"><input type="file" placeholder="oii" name="fichieupload[]" id="fichierupload" multiple><br></textarea></td>
                                                            </tr>
 
                                                    </table>

tous ça dans un form.
pour ajouter une ligne, j'ai trouvé cela :
ça avant le tableau :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript:addRow('ajout');">Ajouter une ligne</a>

et ça après :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function addRow(tableau) {
 
 tableau = document.getElementById(tableau);
 
 var tds = tableau.getElementsByTagName('tr')[0].getElementsByTagName('td').length;
 
 var tr = document.createElement('tr');
 
 for(var i=0; i<tds; i++) {
 
     var td = document.createElement('td');
 
     tr.appendChild(td);
 
     if(i == 0) {
 
         td.innerHTML = '<td style="border: 1px solid black;"><textarea name="tab[]" rows=4 cols=40 style="width: 250px; margin-bottom:8px; margin-top:8px; height: 20px;"></textarea></td>';
 
     }
 
     if(i == 1) {
 
         td.innerHTML = '<td style="border: 1px solid black;"><textarea name="tab[]" rows=4 cols=40 style="width: 250px; margin-bottom:8px; margin-top:8px; height: 20px;"></textarea></td>';
 
     }
 
     if(i == 2) {
 
         td.innerHTML = '<td style="border: 1px solid black;"><input type="file" placeholder="oii" name="fichierupload[]" id="fichierupload" multiple><br></textarea></td>'                                                     
     }
 
 }
 
 if(tableau.firstChild.tagName == 'TBODY') {
 
     tableau.firstChild.appendChild(tr);
 
 } else {
 
     tableau.appendChild(tr);
 
 }
 
}
</script>

J'aimerai avoir des names différents pour chaque textarea rempli. Je ne maitrise pas le javascript et je ne vois pas comment faire, puisque j'ai essayé de mettre les names en tableau mais je n'y arrive pas. Merci de m'aider

[tag9724]

Tu voudrais donc qu'a chaque nouvelle entrée ajoutée le nom des inputs soit incrémenté comme ça ?

• <textarea name="lieu1" ...>
• <textarea name="lieu2" ...>
• <textarea name="lieu3" ...>
• ...

Si oui il suffit juste qu'a chaque ajout d'une nouvelle entrée on récupère le nombre de ligne déjà ajoutées.
Je t'ais mis un exemple basé sur ce que tu as envoyé ici https://jsfiddle.net/4mkqc6oy/


Cela dit en fonction de la façons dont tu traite les données coté serveur il peux être préférable de nommer tes inputs de la sorte

• <textarea name="lieu[]" value="a" ...>
• <textarea name="lieu[]" value="b" ...>
• <textarea name="lieu[]" value="c" ...>
• ...

Ce qui te permettras ensuite en PHP par exemple de faire ça :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$_POST['lieu'][0]; // "a"
$_POST['lieu'][1]; // "b"
$_POST['lieu'][2]; // "c"

[Soden78]

Wow, merci beaucoup pour tout le temps pris, je vais tester ça et je te redis, encore merci !

[Soden78]

C'est bon ça marche c'est parfait, merci beaucoup pour le code et l'explication.
je t'aime <3