rajouter une ligne à un tableau
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:
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:
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 ?
