Bouton DOM dans un tableau

Salut, j'ai un petit problème :

Je fais un bouton :

Code:

---

1 2 3 4 5

var bouton_modifier = document.createElement('input'); bouton_modifier.type = "button"; bouton_modifier.id = "bouton_modifier"; bouton_modifier.name = "bouton_modifier";

---

Je voudrais mettre ce bouton dans une cellule de tableau généré dynamiquement, donc je fais ça :
mon tableau dynamique qui récupère des valeurs dans une base via un fichier php qui génère du xml

Code:

---

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

for (var i=0; i<item.length; i++) { ... // lignes pas importantes où figure la création du bouton modifier tableau += "<tr bgcolor='#e0e0e0'>" tableau += "<td>"+user_id+"</td>"; tableau += "<td>"+login+"</td>"; tableau += "<td>"+mail+"</td>"; tableau += "<td>"+date_creation+"</td>"; tableau += "<td>"+nom+"</td>"; tableau += "<td>"+prenom+"</td>"; tableau += "<td>"+adresse+"</td>"; tableau += "<td>"+code_postal+"</td>"; tableau += "<td>"+ville+"</td>"; tableau += "<td>"+telephone+"</td>"; tableau += "<td>"+mobile+"</td>"; tableau += "<td>"+entreprise+"</td>"; tableau += "<td>"+multi_instance+"</td>"; tableau += "<td>"+etat+"</td>"; tableau += "<td>"+bouton_modifier+"</td>";//ligne importante tableau += "</tr>" }

---

Le soucis c'est que tout s'affiche correctement à part le bouton, à la place du bouton j'ai un joli message [object HTMLInputElement]. Comment faire pour afficher le bouton à la place du message. :cry:

Merci d'avance

Bonjour,

Ne mélange pas la création d'un élément avec DOM et innerHTML.
innerHTML attend de string mais avec DOM, tu dois faire un appendChild dans l'objet parent.

A+.

En fait, il faudrait que je fasse du html pur ce que j'ai essayé de faire au départ mais je ne peux pas utiliser this pour pouvoir personnaliser/individualiser mes boutons dynamiques. J'avais fait une structure de tableau tout en DOM mais je trouve ça casse bec et vachement fastidieux pour au final pas grand chose.

Aurais-tu une solution pour pouvoir récupérer la valeur de l'id d'un bouton généré dynamiquement :

si je remplace :

Code:

---

tableau += "<td>"+bouton_modifier+"</td>";

---

par :

Code:

---

tableau += "<td><input id=user_id type='button' onclick='modifier_utilisateur();' value='M'></td>";

---

Alors, je suis encore sur ce problème, et j'ai eu une idée mais malheureusement, c'est pas encore ça. Pour utiliser des boutons dom avec lesquels je pourrais utiliser this pour les idividualiser je vais mettre une div dans la cellule en question avec un id et utiliser appendChild pour placer mes boutons :

Code:

---

1 2 3 4 5

tableau += "<td><div id='bt_ms'></div></td>"; var place_bt_utilisateur = document.getElementById('bt_ms'); place_bt_utilisateur.appendChild(bouton_modifier_utilisateur); tableau += "</tr>";

---

et ça me fait le fabuleux message : Cannot call method 'appendChild' of null
WHY ?

Merci d'avance.

Parce que l'élément n'existe pas encore dans le DOM mais seulement en format de String de la variable tableau. Soit tu ajoutes d'abord ton tableau en faisant le innerHTML et c'est après que tu faits l'appendChild, soit tu utilises un innerHTML pour tous, soit tu utilises DOM pour tous.

Dans ton précédent post, si tu veux récupérer l'id du bouton pour utiliser dans la fonction

Code:

---

tableau += "<td><input id='user_id' type='button' onclick='modifier_utilisateur(this.id);' value='M'></td>";

---

Mais attention, un id doit être unique dans un document.

A+.

Je n'ai pas réussi à manipuler le this.id dans la fonction quand je fais une alert(pour tester)

Code:

---

1 2 3 4 5

function modifier_utilisateur() { toto = this.id; alert(toto); }

---

on me répond : undefined :?

Regarde bien la valeur du paramètre dans le code que j'ai filé.

A+.

La valeur du paramètre est this.id et donc ...

Code:

---

onclick='modifier_utilisateur(this.id);'

---

Code:

---

1 2 3 4

function modifier_utilisateur(id) { alert(id); }

---

Merci nickel, je dois clairement révisé mon Javascript.:ccool:

tu peux utiliser http://www.developpez.net/forums/d83...ace-innerhtml/

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 29

var table = document.Table(); for (var i=0; i<item.length; i++) { ... // lignes pas importantes où figure la création du bouton modifier table.Tr({bgcolor: '#e0e0e0'}) .Td() .Button({ id: 'bouton_modifier', onclick: function() { alert('click sur le bouton'); } }) .parentNode .parentNode .InlineTag ('td', user_id) .parentNode .InlineTag ('td', login) .parentNode .InlineTag ('td', mail) .parentNode .InlineTag ('td', date_creation) .parentNode .InlineTag ('td', nom) .parentNode .InlineTag ('td', prenom) .parentNode .InlineTag ('td', adresse) .parentNode .InlineTag ('td', code_postal) .parentNode .InlineTag ('td', ville) .parentNode .InlineTag ('td', telephone) .parentNode .InlineTag ('td', mobile) .parentNode .InlineTag ('td', entreprise) .parentNode .InlineTag ('td', multi_instance).parentNode .InlineTag ('td', etat) .parentNode .InlineTag ('td', bouton_modifier) }

---

A+JYT