Bonjour,

J'essaie de créer un tableau plus ou moins dynamique grâce à des boutons qui me permettent d'ajouter des lignes avec des champs à remplir. Mon problème est que si je remplis un champ et que ensuite j'ajoute une nouvelle ligne à mon tableau, les données saisies dans les autres champs sont reset et je ne comprends pas pourquoi

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
<script charset="utf-8">
    function addComp()
    {
        document.getElementById('tableau').innerHTML += '<tr><td><input type="text" class="lesComp form-control"></td><td><select class="form-control">' +
            '<option value="1">1</option>' +
            '<option value="2">2</option>' +
            '<option value="3">3</option>' +
            '<option value="4">4</option>' +
 
            '</select></td></tr>'
    }
 
    function addAxe()
    {
        document.getElementById('tableau').innerHTML += '<tr><td class="lesAxes"><input class="form-control" type="text" ></td><td class="lesAxes">Note Attendu</td></tr>'
    }
</script>
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
24
25
26
<div class="group" style="margin-top: 50px;">
 
</div>
<div>
<table class="table" id="tableau">
    <tr>
        <td class="lesAxes"><input name="axes[]" type="text" class="form-control" ></td>
        <td class="lesAxes">Note Attendu</td>
    </tr>
    <tr>
        <td><input name="competences[]" type="text" class="lesComp form-control"></td>
        <td>
            <select name="noteAttendu[]" class="form-control">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
 
                </select></td>
    </tr>
</table>
</div>
<div class="milieu">
<input type="button" class="boutonCreerGrille" value="AjouterComp" onclick="addComp();" />
<input type="button" class="boutonCreerGrille" value="AjouterAxe" onclick="addAxe();" />
</div>

J'espère que ma demande est assez clair sinon je serai ravi d'apporter plus d'explications ! Merci d'avance de votre aide !