Ajout de ligne dynamique dans un tableau (Incompatible IE)

Version imprimable

Bonjour,

Je cherche à rajouter de manière dynamique des lignes à mon tableau mais je n'y parviens pas sous IE. :( (Ce code fonctionne parfaitement sous Opéra et Firefox)

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<TABLE id="ma_table" BORDER="0" CELLSPACING="0" CELLPADDING="0"  bgcolor="white">
     <TR height="2px" bgcolor="white"><TD><a href="#">Ligne 1</a></TD></TR>
</TABLE>
<SCRIPT language="JavaScript">
<!--
     ligne               = document.createElement('tr');
     cell                = document.createElement('td');
     cell.innerHTML = '<a href="#">Ligne 2</a>';
     ligne.appendChild(cell);
     document.getElementById('ma_table').appendChild(ligne);
-->
</SCRIPT>

Si quelqu'un a une idée...

D'avance Merci

24/05/2006, 18h39
psychoBob

Tu t'es planté de forum là je crois.

et si tu essayais un code tout simple:
Code:

1 2 3 4 5 6 7 8 9 10 <Script langage="JavaScript"> Mot = "<tr>"; Mot = Mot & "<td>"; Mot = Mot & "<a href='#'> Ligne 1 </a>"; Mot = Mot & "</td>"; Mot = Mot & "</tr>"; document.write(mot); </script>
je croit que ceci devrais aller.

24/05/2006, 20h56
seb34

Malheureusement, je ne peux pas utiliser ce bout de code car je désire rajouter un élément à mon tableau une fois que la page HTML est déja chargée.
C'est pour cela que j'utilise la création dynamique d'objet selon l'architecture DOM pour arriver à mes fins... mais mon problème c'est que je pense qu'IE ne répond pas au standard de programation dans ce domaine. Ou peut être tout simplement que c'est moi qui n'utilise pas la bonne méthode.

Encore une fois, ton post aurait été plus à sa place sur le forum javascript...

Pour ce qui est de la "solution", c'est que IE est apparement strict sur la prise en compte des éléments optionnels.

Il faut donc que dans ta table tu tiennes compte du tbody même si tu n'en utilise pas.

voilà un code qui fonctionne (chez moi...) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<script type="text/javascript">
        // Recuperation des elements :
        var ligne       = document.createElement("tr");
        var colonne     = document.createElement("td");
        var a           = document.createElement("a");
        var href        = document.createAttribute("href");
        var texte       = document.createTextNode("Ligne 2");
 
        // Affectation des valeurs
        href.nodeValue = "#";
        a.setAttributeNode(href);
        a.appendChild(texte);
        colonne.appendChild(a);
        ligne.appendChild(colonne);
 
        // Ajout dans le tableau APRES le <tbody> (d'ou le firstChild)
        document.getElementById("ma_table").firstChild.appendChild(ligne);
</script>

26/05/2006, 09h44
seb34

Désolé de ne pas être dans le bon forum.

Pour ce qui est de ta solution, elle fonctionne parfaitement sous IE mais au premier abord je dirais qu'elle n'est pas compatible avec Firefox.
Si je ne trouve pas autre chose je peux rajouter un test pour connaître le type de navigateur utilisé mais bon... je préfèrerais éviter.
26/05/2006, 10h12
seb34

La solution est :

Code:

document.getElementById ('ma_table').getElementsByTagName('tbody')[0].appendChild (ligne);

à la place de

Code:

document.getElementById('ma_table').appendChild(ligne);
26/05/2006, 10h27
Loceka
Autant pour moi, je n'avais testé qu'avec Opera et IE...

Ben sinon, la solution est simple, il suffit de créer ta table avec de thead, tfoot et tbody (ou juste tbody en fait, mais je ne sais pas si c'est conforme aux normes, si ça l'est tant mieux).

A partir de là, tu appliques ton javascript de la façon suivante :
Code:

1 2 3 4 5 // Si ta page ne possède qu'une seule page : document.getElementsByTagName('TBODY')[0].appendChild(ligne); // sinon : document.getElementById("mon_tbody").appendChild(ligne);
Ca, ça marche avec les 3 ! :)

PS :
Ce serait pas mal qu'ils fassent des efforts de normalisation dans l'interpretation des javascripts et CSS quand même...

D'ailleurs, malgré ce qu'on entend beaucoup, je trouve que IE n'a rien à envier à FireFox, qui lui non plus ne respecte pas tellement les normes ! Surtout en ce qui concerne les CSS...
26/05/2006, 11h03
seb34

OK merci pour ton aide précieuse.