Jonathan Beliën

Jonathan Beliën

Freelance Web Developer

« Spécialiste » en cartographie numérique
Membre du conseil d'administration d'OpenStreetMap Belgique
Membre d'Open Labs (Albanie)
Fan de LEGO et de bande-dessinées
Photographe amateur



JavaScript: Ajouter des lignes à un tableau dynamiquement

Publié le 29.06.2008

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>