[DOM] insertion de code HTML au sein d'un tableau avec innerHTML

Bonjour tout le monde,
J'ai un tableau xhtml avec une liste déroulante, quand je clique sur un élément de cette liste je déclenche un évènement onChange() et je voudrais ajouter une ligne dans mon tableau en fonction de ce qui est sélectionné.
J'arrive bien à faire tout ça avec Ajax et le framework prototype, le problème c'est quand jé récupère ma réponse ajax et que je fais un innerHTML (dans un tr) ça marche pas avec IE !

Voici le code de ma fonction javascript :

Code:

---

1 2 3 4 5

function afficherCompatible(reponse) { var ligne = document.getElementById("ligneCompatible"); ligne.innerHTML= reponse.responseText; }

---

Dans mon HTML j'ai ça :

Code:

---

1 2 3 4 5 6

<table> ... <tr id="ligneCompatible"></tr> ... </table>

---

Dans "reponse.responseText" de ma fonction javascript j'ai du code html (généré par un template) avec les TD qui vont bien pour remplir la TR ci dessus.

Auriez-vous une solution ?

C'est un problème très connu qui ne se produit que sur IE :

Citation:

---

innerHTML:

The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

---

Ce que tu peux faire c'est d'ajouter les <td/> dans le <tr/> avec le DOM et faire un innerHtml sur les <td/>.

insertRow
createElemen('td') ...

bref les contournements possibles sont multiples ...

OK, mais le problème c'est que j'utilise Smarty comme moteur de template et je renvoie un template relativement important, alors tout me retaper avec le DOM, c'est un peu galère. De plus j'utilise dans ce template des variables smarty et autres fonctions que je ne peux pas retranscrire en Javascript. :cry:

C'est bon enfin, j'ai trouvé. En fait le framework Prototype gère cette aspect avec la fonction "replace". Ce qui donne ça dans mon code :

Code:

---

1 2 3 4

function afficherCompatible(reponse) { $('compatibleLigne').replace(reponse.responseText); }

---