[DOM] IE vs FF : mise à jour dynamique d'un tableau

Ce code me permet de mettre à jour un tableau à partir des résultats d'une requete en AJAX. Je créé une nouvelle ligne, une nouvelle cellule, et je place dedans du texte ainsi qu'un champ input hidden.

Sous Firefox ça marche très bien, sous IE aucune ligne ne se rajoute à mon tableau :(

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 25 26 27 28

// On créé la ligne var TR = document.createElement ("tr");   var TD_kcal = document.createElement ("td"); var TXT_kcal = document.createTextNode (kcal); TD_kcal.appendChild (TXT_kcal);   var form = document.createElement("form"); TD_kcal.appendChild (form);   // input hidden kcal var input_kcal = document.createElement("input"); form.appendChild (input_kcal); // attribut type var attr_type = document.createAttribute("type"); attr_type.nodeValue = "hidden"; input_kcal.setAttributeNode(attr_type); // attribut name var attr_name = document.createAttribute("name"); attr_name.nodeValue = "kcal"; input_kcal.setAttributeNode(attr_name); // attribut value var attr_val = document.createAttribute("value"); attr_val.nodeValue = kcal; input_kcal.setAttributeNode(attr_val);     TR.appendChild(TD_kcal);

---

si je remplace "hidden" par "text" ça marche bien en affichant l'input, mais c'est pas ce que je veux...

Je vois vraiment pas d'où ça pourrait venir, vous avez une idée ?

Merci

as tu créé un tbody dans ta table?

bonjour,


pour un tableau il faut utiliser les méthodes insertRow() et insertCell().

Oui j'ai bien un thead et un tbody, et je rajoute dans le tbody


Je vais essayer avec InsertRow et InsertCell merci.

Bon alors j'ai fait des tests avec insertRow() et InsertCell() avec des cellules de text, ça marche bien sous IE et sous FF, par contre quand je veux mettre des formulaires dans mes cellules ça marche moins bien :/


Le code simplifié :

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 25 26

var row = document.getElementById("liste").insertRow(-1);   var TD_kcal = row.insertCell(-1); var TXT_kcal = document.createTextNode (kcal); TD_kcal.appendChild (TXT_kcal);   // formulaire var form = document.createElement("form"); TD_kcal.appendChild (form);   // input hidden var input_kcal = document.createElement("input"); input_kcal.className = 'kcal'; form.appendChild (input_kcal); // attribut name var attr_name = document.createAttribute("name"); attr_name.nodeValue = "kcal"; input_kcal.setAttributeNode(attr_name); // attribut value var attr_val = document.createAttribute("value"); attr_val.nodeValue = kcal; input_kcal.setAttributeNode(attr_val); // attribut type var attr_type = document.createAttribute("type"); attr_type.nodeValue = "hidden"; input_kcal.setAttributeNode(attr_type);

---

J'ai également d'autre insertCell() avant et après mais qui ne pose pas de problème puisque ce n'est que du texte.

Le problème ici est que l'input que je veux mettre dans mon form doit être "hidden", je créé donc un attribut type et je suis lui donne la bonne valeur. Ca marche sans problème sous FF, mais pas sous IE.
Sous IE j'ai l'input qui s'affiche comme si j'avais donné à l'attribut type la valeur "text". Et puis les cellules qui devrait s'afficher après celle ci ne s'affiche pas non plus, comme s'il bloquait sur cette cellule, et pourtant je n'ai pas de message d'erreur apparent.


Je vois vraiment pas d'où ça peux venir, une idée ?

IE ne prend pas en charge les méthodes createAttribute, setAttributeNode, setAttribute, getAttribute (bref toutes les méthodes qui gèrent les attributs :aie:).

Donc il vaut mieux écrire :

Code:

---

1 2 3 4 5

var input_kcal = document.createElement("input"); input_kcal.type = "hidden"; input_kcal.value = "valeur"; //etc..

---

Merci pour la réponse, je viens d'essayer le code suivant :

Code:

---

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

var TD_kcal = row.insertCell(-1); var TXT_kcal = document.createTextNode (kcal); TD_kcal.appendChild (TXT_kcal); // form var form = document.createElement("form"); TD_kcal.appendChild (form);   // input hidden kcal var input_kcal = document.createElement("input"); input_kcal.className = 'kcal'; form.appendChild (input_kcal); input_kcal.name = "kcal"; input_kcal.value = 10; input_kcal.type = "hidden"; alert(input_kcal.value);

---

j'ai toujours le même problème sous IE, et j'ai même l'impression que ça ne passe plus sous FF. J'ai rajouté le alert() pour voir si le value est bien attribué.
Avec type="text" j'ai bien 10 qui s'affiche, avec type="hidden" j'ai une fenêtre vide :(

Je vais revenir avec ma première solution, mais j'aimerais bien quand même trouver pourquoi ça ne marche pas sous IE

Fais l'appendChild après avoir défini les propriétés de ton élément. De plus, sous IE je crois que l'on ne peut pas attribuer de manière dynamique le name d'un élément. :?

Citation:

---

Envoyé par Auteur

Fais l'appendChild après avoir défini les propriétés de ton élément. De plus, sous IE je crois que l'on ne peut pas attribuer de manière dynamique le name d'un élément. :?

---

+1
Il faut le faire après que l'élément ait été créé ...

A+

Ca marche :)

Plus de problème a priori, même sous IE.


Une dernière question, dans une autre cellule j'ai un input qui doit avoir un attribut onchange.

J'avais ça avec ma première solution :

Code:

---

1 2 3 4

// attribut onchange var attr_change = document.createAttribute("onchange"); attr_change.nodeValue = "MAJ_info_rec()"; iput_poids.setAttributeNode(attr_change);

---

mais avec la nouvelle manière que vous m'avez expliquer j'ai pas l'impression que ce soit possible de faire

Code:

---

input_poids.onchange = "MAJ_info_rec()";

---

C'est possible de rajouter un gestionnaire d'évènement onchange sur un input générer dynamiquement ?

Merci

Citation:

---

Envoyé par vichenze

mais avec la nouvelle manière que vous m'avez expliquer j'ai pas l'impression que ce soit possible de faire

Code:

---

input_poids.onchange = "MAJ_info_rec()";

---

C'est possible de rajouter un gestionnaire d'évènement onchange sur un input générer dynamiquement ?

---

tu y étais presque ;) :

Code:

---

input_poids.onchange = function(){MAJ_info_rec()};

---

Génial ça marche :)

Merci beaucoup pour cette précieuse aide.