rajouter une ligne à un tableau

**Soden78** · 11/06/2021, 11h36

Bonjour, j'aimerais rajouter une ligne à un tableau en appuyant sur un bouton.
Je me suis renseigner mais je comprends pas tout.

Le code pour mon tableau

Code :

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
 
    <a href="javascript:addRow('ajout');">Ajouter une ligne</a>
 
<table id="ajout" style="text-align:center;  border-collapse: collapse; width:1000px; margin: auto; padding-bottom:10px;">
                                                        <tbody style=" text-align:center;">
                                                            <tr>
                                                                <th style="border: 1px solid black;">lieu de la zone</th>
                                                                <th style="border: 1px solid black;">anomalies</th>
                                                                <th style="border: 1px solid black;">photo</th>
                                                            </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="fichier_upload" multiple><br></textarea></td>
                                                            </tr>
                                                        </tbody>
                                                    </table>

et pour le javascript que je ne maitrise pas, j'ai trouvé quelque trucs mais j'arrive pas à l'arranger pour mon tableau

Code :

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
46
<script>
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="lieu1" 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="lieu1" 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="fichier_upload[]" id="fichier_upload" multiple><br></textarea></td>'                                                     
     }
 
 }
 
 if(tableau.firstChild.tagName == 'TBODY') {
 
     tableau.firstChild.appendChild(tr);
 
 } else {
 
     tableau.appendChild(tr);
 
 }
 
}
</script>

Le bouton ne fais rien quand j'assemble les 2, des conseils ?