JavaScript: Ajouter des lignes à un tableau dynamiquement

Dans le cadre du projet « ArchiPlanner », je dois ajouter dynamiquement des lignes à un tableau. J’utilise pour cela le JavaScript.

Le code est assez simple :

function addLine() {
  TR = document.createElement("tr");

  TD1  = document.createElement("td");
  TXT1 = document.createTextNode('Colonne 1');
  TD1.appendChild(TXT1);
  TR.appendChild(TD1);

  TD2  = document.createElement("td");
  TXT2 = document.createTextNode('Colonne 2');
  TD2.appendChild(TXT2);
  TR.appendChild(TD2);

  document.getElementById('planning').appendChild(TR);
}

Du côté HTML :

<table id="planning" border="0">
  <tr>
    <th>Entête 1</th>
    <th>Entête 2</th>
  </tr>
</table>

Ce code ajoute donc une ligne (<tr>) contenant 2 colonnes (<td>) au tableau dont l’identifiant est « planning ». Sous Firefox, tout baigne ça marche parfaitement.

Malheureusement, sous IE, grand malheur, cette fonction ne fait rien.

Pour que ça fonctionne sous IE et sous Firefox, il faut que l’identifiant « planning » soit déclaré sur la balise <tbody> (qui représente le corps du tableau, par rapport à <thead> qui est l’entête et <tfoot> le pied du tableau).

<table border="0">
  <thead>
    <tr>
      <th>Entête 1</th>
      <th>Entête 2</th>
    </tr>
  </thead>
  <tbody id="planning">
  </tbody>
</table>

Jonathan Beliën

JavaScript: Ajouter des lignes à un tableau dynamiquement