Discussion :

[Tayaress]

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 !

[SpaceFrog]

Le innerHTML de ton élément est celui du chargement, le innerHTML n'est pas modifié par le fait que tu as modifié le value de ton input
D'où le fait qu'il reparte avec le innerHTML de base sans les values pour y ajouter ta ligne et don il réinitialise les inputs

Il vaudrait mieux passer par du cloneNode et appendChild...

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
var Compline=document.createElement("tr");
Compline.innerHTML='<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>';
var Axeline=document.createElement("tr");
Axeline.innerHTML='<td class="lesAxes"><input class="form-control" type="text" ></td><td class="lesAxes">Note Attendu</td>';
 
function addComp()
    {
        newComp=Compline.cloneNode('true');
        document.getElementById('tableau').appendChild(newComp);
    }
 
    function addAxe()
    {
    	newAxe=Axeline.cloneNode('true');
        document.getElementById('tableau').appendChild(newAxe);
    }

Accessoirement Note est féminin ... Note Attendue

[danielhagnoul]

En utilisant "innerHTML" vous obligez le DOM à se reconstruire à chaque ajout.

Voir : https://developer.mozilla.org/fr/doc.../createElement

[Tayaress]

C'est parfait merci beaucoup, j'aurais du me douter qu'avec le inner ca se passerait comme ça !

Bonne journée et merci encore !