[DOM] Création dynamique d'un tableau bug sous Firefox

Bonjour tout le monde, ouaip, ça va vous paraître bizarre, mais j'ai la création d'un tableau qui fonctionne sous IE mais pas sous Firefox, alors que j'utilise le DOM dans le bon ordre. C'est à dire :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var table = document.createElement('table'); var tBody = document.createElement('tbody'); var row = document.createElement('tr'); var cell = document.createElement('td'); var inputText = document.createElement('input'); inputText.setAttribute('type','text'); inputText.setAttribute('value','toto');   //Ensuite, je rajoute les enfants dans l'ordre inverse cell.appendChild(inputText); row.appendChild(cell); tBody.appendChild(row); table.appendChild(tBody);   //Disons que l'on a récupéré le body plus haut body.appendChild(table);

---

Bien entendu, j'ai des boucles qui crééent les lignes et les cellules.

Sous IE, j'ai un bon tableau :
http://img23.imageshack.us/img23/1346/tableierb8.th.png


Mais sous Firefox:
http://img25.imageshack.us/img25/8074/tableffur0.png

Je pense, comme sur certains sujets Javascript de ce forum, que cela vient de la balise input qui n'est pas fermée (en effet, le createElement doit créer un truc du genre <input type="text" value="toto">). IE, qui ne respecte rien, doit laisser passer ça, mais FF ne doit pas aimer.

Merci de votre aide !

y as pas moyen que tu rajoute une balise "</input>"???

Ben je sais pas si c'est cross browser...

A part si je fais un truc moche du genre :

Code:

---

1 2 3 4 5

var myDiv = document.createElement('div');   myDiv.innerHTML = '<input type="text" value="toto" />'; cell.appendChild(myDiv);

---

Y'a pas autre chose que ça ??

Code:

---

1 2	inputText.type='text'; inputText.value='toto';

---

sinon
http://www.developpez.net/forums/d47...us-rapidement/

Citation:

---

Envoyé par SpaceFrog

Code:

---

1 2	inputText.type='text'; inputText.value='toto';

---

---

Merci, mais j'avais testé, ça revient au même.

Je dirais plutôt qu'il doit y avoir un souci dans ta façon de générer ton tableau.
Ton code ne correspond pas aux images et manifestement, vu le symptôme, l'erreur semble précisément venir de la portion de code que tu ne montres pas ! (Génération et insertion de plusieurs cellules par ligne)

Ok ok, pourtant ce que j'ai mis là haut résume mon code, mais bon, je vous montre ça.

J'ai trois objets JS, appellons-les MyTable, MyRow(name,index), et MyCell(name,index).

1) Je créé d'abord toutes les instances d'objets nécessaires, lignes avec leurs cellules associées. Les listes de lignes et de cellules sont remplies.

Code:

---

1 2 3 4 5

//Dans MyTable.js   //Array d'objets MyRow this._listRows;

---

Code:

---

1 2 3 4 5

//Dans MyRow.js   //Array d'objets MyCell this._listCells;

---

Donc tout ceci est construit sous forme d'arbre :
MyTable
|_______MyRow1
|_________MyCell1
|_________MyCell2
|_________MyCellN
|_______MyRowN

2)Je parcours tous les objets créés précédemment et je construis mon tableau :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

//Dans MyTable.Js     var myTable = document.createElement('table'); var myTBody = document.createElement('tbody');     if (this._listRows != null) { for (var i = -1; i < this._listRows.length; i++) {   //Dans MyTable.js j'ai une méthode de recherche de la ligne par index, et, avec la Row trouvée, je peux faire un ajout de Row avec le TBody en paramètre this.GetRow(i).Add(myTBody); } }     myTable.appendChild(myTBody);   //DivContent est le div récupéré lors de la construction de l'objet divContent.appendChild(myTable);

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

//Dans MyRow.js MyRow.prototype.Add = function(tbody) { //Création de la Row var myRow = document.createElement('tr');   //Ajout des cellules dans la Row for (var i = -1; i < this._listCell.length; i++) {   var cell = null;   //Méthode présente dans MyRow.js qui récupère la cellule de l'index cell = this.GetCell(i);   if (cell != null) {   //Ajout de cellule dans la Row cell.Add(myRow); } } //Ajout de la Row dans le TBody tbody.appendChild(myRow); }

---

Code:

---

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

//Dans MyCell.js   MyCell.prototype.Add = function(row) { var myCell = document.createElement('td'); var inputText = document.createElement('input');   myCell.appendChild(inputText); inputText.setAttribute('type','text'); inputText.setAttribute('value','toto');   row.appendChild(myCell);   }

---

Voilà, c'est ce que je fais, je pars du parent vers l'enfant pour créer mon tableau.

Pfff, même sans le input ça plante sous FF, je ne comprends pas pourquoi là...

Parce que le problème ne vient pas de l'input...
Mais avec le code parcellaire que tu nous montres, il est difficile d'en dire plus !

EDIT : Sauf que tu as apparemment plus de contenu que de cases, puisque tes boucles vont de -1 à la longueur de tes arrays :?

Heu parcellaire ? je vous montre les trucs principaux qui touchent au DOM ! Avant, ce n'est que de l'instanciation d'objet javascript avec méthodes et propriétés...

Pour ce qui est du -1, c'est normal, je me suis gouré en mettant de 0 à 10 dans l'exemple, c'est de -1 à 10.

Edit: En ce qui concerne la création des éléments, je vous montre la TOTALITE de ce que je fais en DOM et qui créé donc les lignes et cellules de la table.

Heu, à quoi correspond la balise [FAIT] à côté de mon sujet ? Cela signifie qu'on ne peut aller plus loin ?

as tu au moins été voir les liens qui ton' étés donnés ?
le code de création rapide de tableau fonctionne sous IE FFX etc ...

Oui, j'ai été voir ton lien dès que tu as posté ta réponse, et je n'arrive pas à voir la différence avec ce que j'ai fait. Ce que je fais, je le fais dans le même ordre que toi:

Création de l'élément Table
Création de l'élément TBody
Création des éléments TR
|____Création des éléments TD pour chaque TR
|_________Création des éléments Text ou Input pour chaque élément TD
|_________Assignation du Text ou Input dans l'élément TD
|____Assignation des éléménts TD dans chaque TR
Assignation de chaque TR dans le TBody
Assignation du TBody dans l'élément TABLE
Assignation de l'élémént TABLE dans mon conteneur (div ou body).


Ecoutez, je ne suis pas de mauvaise foi, ce n'est pas comme si je n'avais pas cherché avant...

Je ne suis pas de mauvaise foi mais par contre je suis un gros boulay :mrgreen:.

Le bug vient du fait que j'avais un display:block qui trainait. FF n'aime pas pour des cellules de tableau, ce qui est normal, et il faut mettre le display à ''.

Donc c'est résolu, et je remercie toutes vos réponses et votre aide.

tu peux laisser le block mais mettre un tablerow sur les tr ...

Citation:

---

Envoyé par SpaceFrog

tu peux laisser le block mais mettre un tablerow sur les tr ...

---

Ok merci :D.