Bonjour,
Je suis conscient que DOM est plus conseillé que innerHTML, mais dans mon cas cela n'a pas vraiment d'importance.
Venons en à mon problème: J'ai créé une simple fonction javascript qui permet d'ajouter un champ dans un formulaire lorsque l'on clique sur un lien.
Le premier champ s'affiche normalement mais des que je tente de rajouter d'autre champs, il ne prend pas la balise de fermeture </tr>.

Voici le code en question:

La fonction:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
 
function create_indic(actualValue, indicatorName) {
  var nextValue = actualValue + 1;
 
  document.getElementById('newIndic'+actualValue).innerHTML = '<td>'+indicatorName+' N°'+actualValue+' :<input type="hidden" name="indic'+actualValue+'">';
  document.getElementById('newIndic'+actualValue).innerHTML += '</td><td><input type="text" name="libelle'+actualValue+'" id="libelle'+actualValue+'" validator="all"></td>';
  document.getElementById('newIndic'+actualValue).innerHTML += '</tr><tr id="newIndic'+nextValue+'"></tr>';
  document.getElementById('addIndic').innerHTML = '<a href="javascript:create_indic('+nextValue+',\''+indicatorName+'\')" class="blackLink">Add an indicator</a>';
}
La page HTML:
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
 
  <form name="form" method="POST" action="...">
    <tr>
      <th>        {indicator_number}
      </th>
      <th>        {libelle}
      </th>
    </tr>
    <tr id="newIndic{nextIndic}"></tr>
    <tr>....</tr>
</form>
...
<span id="addIndic">
  <a href="javascript:create_indic({nextIndic},'{indicator_name}')" class="blackLink">Add an indicator</a>
</span>
Pour rester général, la fonction créer quatre nouveaux champs:
  • Premiere balise TD: Description du champ et champ hidden
  • Deuxième TD: un champ de saisie
  • C'est pour ce champ que j'ai un problème, en effet, il ne prend pas en compte la balise </tr> dans l'instruction:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    document.getElementById('newIndic'+actualValue).innerHTML += '</tr><tr id="newIndic'+nextValue+'"></tr>';
    Et je me retrouve ainsi avec la création de la nouvelle balise <tr id="newIndic'+nextValue+'"> dans la balise actuelle; ce qui a pour effet de m'afficher l'ensemble des nouveaux champs dans la même balise <tr>


J'ai beau essayer de comprendre et d'écrire de différentes manières la fonction javascript, mais impossible de fermer la balise en cours..

Si quelqu'un aurait une idée je suis preneur

Merci d'avance