[DOM] innerHTML et <table>

Salut à tous !

J'ai un souci avec innerHTML et internet explorer (normal vous me direz !) que je n'arrive pas à comprendre, ni à résoudre...

Pour faire simple, imaginons que j'ai un tableau HTML dans lequel je souhaite ajouter des lignes lorsque je clique sur un bouton. J'appelle mon tableau titi, et je souhaite utiliser innerHTML pour l'ajouter des lignes.

Code:

---

1 2 3 4 5 6 7 8 9 10

<script language="javascript" type="text/javascript"> function ajout() { document.getElementById("titi").innerHTML += "<tr><td>ligne 2</td></tr>"; } </script>   <table id="titi"> <tr><td>ligne 1</td></tr> </table> <a href="javascript:ajout();">Ajouter une ligne</a>

---

Aucun souci sous Firefox mais problème sous IE ! J'ai l'impression que IE n'aime pas que l'on insert du HTML dans un attribut <table> (à noter que si l'on remplace <table> par <div>, ça marche très bien !! bizarre...).

Je sais que la solution serait possible avec DOM (d'ailleurs avec ce petit exemple ce serait facile) mais imaginer que mon tableau contienne non pas une colonne mais plusieurs avec à l'intérieur des champs de formulaires bien complexe...

Bref, quelqu'un aurait une idée ?

merci d'avance

http://support.microsoft.com/default...%3Bfr%3B239832
désolé

Yop!


Ha bin oui, avec IE, faut être verbeux, il aime ça.

Code:

---

1 2 3 4 5 6 7 8

function ajout() { var tobj = document.getElementById("titi"); var tr = tobj.insertRow(tobj.rows.length); var td = tr.insertCell(tr.cells.length); td.innerHTML = "whatever you want man, you are free!" }

---

Encore que si tu ne rajoutes pas de balise HTML à l'intérieur du <TD>, tu peux te contenter de

Code:

---

1 2	td.innerText = "whatever you want man, you are free!"

---

Voilà, ça devrait marcher.

Yan
Un kilomètre à pieds, ça use, ça use...

GOUPS

sérieusement je vous déconseille d'utiliser innerHTML et autre truc du genre propres à IE.

il y a un moyent simple de faire ça conforme au WC
1) mettre un ID au tableau
2) récupérer le tableau par son id dans le javascript

Code:

---

mytable = document.getElementById('mytableid');

---

et ensuite utiliser les methodes du dom pour ajouter des lignes au tableau

Code:

---

1 2 3 4 5 6

var row = document.createElement('tr'); var container = document.createElement('td'); var theData = document.createTextNode('mytext'); container.appendChild(theData); row.appendChild(container); mytable .appendChild(row);

---

c'est simple à mettre en oeuvre on peut éventuellement en faire une fonction et c'est 100% compatible

A+JYT

Ca marche pas ton truc

Je vois que tu utilise IE
donc dans IE tu ne peux pas avoir de <tr> dans une <table>

lorsque tu écris

Code:

---

<table><tr><td>2</td></tr></table>

---

IE le transforme en

Code:

---

<table><tbody><tr><td>2</td></tr><tbody></table>

---

lorsque j'ai donné l'exemple c'était sur le principe et je n'ais pas regardé les particularité de IE
mon code n'était XHTML compliant. il faut en passer par le TBODY soit tu mets ton id sur ton tbody et le code que j'avais donné fonctionne

Code:

---

1 2 3 4 5 6 7 8 9 10

<table><tbody id="mytableid" /></table> <script > mytable = document.getElementById('mytableid'); var row = document.createElement('tr'); var container = document.createElement('td'); var theData = document.createTextNode('mytext'); container.appendChild(theData); row.appendChild(container); mytable .appendChild(row); </script>

---

soi tu ajoute le tbody à la volée

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<table id="mytableid" ></table> <script > mytable = document.getElementById('mytableid'); var tbody = document.createElement('tbody'); var row = document.createElement('tr'); var container = document.createElement('td'); var theData = document.createTextNode('mytext'); container.appendChild(theData); row.appendChild(container); tbody .appendChild(row); mytable .appendChild(tbody); </script>

---

bref si tu respecte la structure du XHTML tous les navigateur supportant le DOM interpréterons correctement ton code.

lorsque tu utilise innerHtml le navigateur va lire le texte et l'envoyer au parser qui va détecter qu'il s'agit de html il vas alors interpréter chaque tag et tenter de construire la structure demandée. si le code n'est pas conforme au règle du xhtml il va faire des choix et ajouter les parties manquantes par exemple les tag non fermés. mais aussi ajouter les tag manquants ainsi lorsque tu écris

Code:

---

document.getElementById("titi").innerHTML += "<tr><td>ligne 2</td></tr>";

---

en réalité tu fais

Code:

---

document.getElementById("titi").innerHTML += "<tbody><tr><td>ligne 2</td></tr></tbody>";

---

Mais tu ne le vois pas.
une fois le code lu et interprété le navigateur va instancier en memoire l'objet DOM corespondant. il va relier les objets entre eux et enfin attacher le tout à l'objet sur le quel on a fait le innerhtml après avoir supprimé tous les objets déjà présent.

lorsque tu utilise les méthode du DOM c'est tois qui créé les objets les détache et les attache à ta guise. sans en passer par l'interprête html du navigateur.

le revers de la médaille c'est qu'il te faut respecter la structure du document. ainsi si tu met un tag entre deux tr

Code:

---

(<tr><td>toto</td></tr><div>coucou</div><tr><td>toto</td></tr>)

---

ça ne marchera pas et la valeur ne sera pas affiché. en passant par l'interprète tu ne sais pas ce que ça donnera mais ça passera. l'interprète html des navigateur est laxiste. cela lui permet d'afficher quelque chose même si la source n'est pas parfaite.

A+JYT