Insertion d'un bouton en jquery dans <td> [Résolu]

Dargos30 · 16/02/2012, 11h54

Bonjour tout le monde,
Je débute en jquery.

Objectif insérer un <input type="button"> à l'intérieur de la table suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<table id='item' width='100%'>
  <tr>
     <td></td>
     <td width='50px'>toto</td>
     <td width='20px'></td>
     <td width='130px'>tata</td>
  </tr>
</table>"

je cherche à insérer sur le deuxième td (<td width='20px'></td>)
voila le code que j'ai pour l'instant:
Création de mon bouton:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var $addbtnprdt = $("<input></input>")
                            .attr("id", "addprdt")
                            .attr("rel", itemId)
                            .addClass('scItemButton scBtnPrdt')
                            .click(addCartItemEvent);

sélection de l'élément avec l'ajout du bouton:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$(itemText).find("tbody tr td").eq(2).append($addbtnprdt);

Je sélectionne bien mon deuxième td, mais l'append ne fonctionne pas.
$(itemText) contient la table entière.

Pouvez vous m'aider.

Merci

ticroch · 16/02/2012, 11h56

ca ca devrait marcher je pense !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$addbtnprdt.appendTo($(itemText).find("tbody tr td").eq(2));

Dargos30 · 16/02/2012, 12h11

Merci pour ta réponse aussi rapide ticroch,

malheureusement ca ne fonctionne pas. je regarde ma table et elle n'a toujours pas le bouton.

je met le code en entier, ca peut aider:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var $addbtnprdt = $("<input></input>")
                            .attr("id", "addprdt")
                            .attr("rel", itemId)
                            .addClass('scItemButton scBtnPrdt')
                            .click(addCartItemEvent);
 
 
                        var itemText = "<table id='item' width='100%'><tr><td>" + tmpOpt.html() + "</td><td width='50px'>" + itemQty +
                                 "</td><td class='btn' width='20px'>"
                                 + "</td><td width='130px'>" + itemTotal + "</td></tr></table>";
 
                        $addbtnprdt.appendTo($(itemText).find("tbody tr td").eq(2));

ticroch · 16/02/2012, 12h23

mais ta table tu ne l'ajoute jamais au body ??

Dargos30 · 16/02/2012, 12h27

si j'ai bien ma table qui apparait dans ma page (itemText), mais je n'ai pas le bouton.

J'ai mis juste une partie du code, et pas l'insertion dans <body>.

ticroch · 16/02/2012, 12h33

Comme ca ca marchera mieux sûrement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$addbtnprdt.appendTo($(itemText).find("td").eq(2));

ticroch · 16/02/2012, 12h35

et il faut sûrement créer l'élément jquery avant !!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
itemptext = $(itemtext); // creation de l'element jQuery
$addbtnprdt.appendTo(itemText.find("td").eq(2));

Dargos30 · 16/02/2012, 13h45

Bien joué ça fonctionne effectivement il faut créer l'élément jquery avant.

Pour quel raison exactement?

Merci de ton aide

ticroch · 16/02/2012, 13h51

car en fait en utilisant juste le texte tu vas crée plusieurs fois ta table !!

première fois ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$(itemText).find("tbody tr td").eq(2).append($addbtnprdt);

ici tu inseres ton bouton dans la table, mais tu ne fais rien avec elle ensuite, donc elle ne sera donc pas inséré dans le dom

deuxieme fois, quand tu l'insères au body.

Donc toujours penser, quand tu veux travailler avec un élément, tu dois travailler avec l'élèment jQuery et pas avec un String !!!! (sauf si le String est l'id la ca marche ^^)

Dargos30 · 16/02/2012, 13h56

Ok parfait master of pepets.

Merci pour l'aide.

ticroch · 16/02/2012, 14h03

Citation:

Ok parfait master of pepets.

master of pepets ????

16/02/2012, 12h23	#4
ticroch Membre confirmé Inscription : décembre 2009 Messages : 249 Détails du profil Informations forums : Inscription : décembre 2009 Messages : 249 Points : 219 Points : 219	mais ta table tu ne l'ajoute jamais au body ??
	00

16/02/2012, 12h27	#5
Dargos30 Membre à l'essai Inscription : juillet 2004 Messages : 48 Détails du profil Informations forums : Inscription : juillet 2004 Messages : 48 Points : 22 Points : 22	si j'ai bien ma table qui apparait dans ma page (itemText), mais je n'ai pas le bouton. J'ai mis juste une partie du code, et pas l'insertion dans <body>.
	00

16/02/2012, 13h45	#8
Dargos30 Membre à l'essai Inscription : juillet 2004 Messages : 48 Détails du profil Informations forums : Inscription : juillet 2004 Messages : 48 Points : 22 Points : 22	Bien joué ça fonctionne effectivement il faut créer l'élément jquery avant. Pour quel raison exactement? Merci de ton aide
	00

16/02/2012, 13h56	#10
Dargos30 Membre à l'essai Inscription : juillet 2004 Messages : 48 Détails du profil Informations forums : Inscription : juillet 2004 Messages : 48 Points : 22 Points : 22	Ok parfait master of pepets. Merci pour l'aide.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email