Comment ajouter du code a la suite ?

Version imprimable

Bonjour, je fait un petite appli en php pour créer des devis, et j'aimerai que des que la personne click sur Ajouter çà lui ajoute une nouvelle ligne pour ajouter un produit:

voici le code php:
Code:

1 2 3 4 5 $produit='<select name="produit[]">'; while($result_produit=mysql_fetch_array($req_produit)){ $produit.= '<option value="'.$result_produit['produit'].'">'.$result_produit['produit'].'</option>'; } $produit.='</select>';
donc en gros là $produit contient une suite d'option a selectionner

l'affichage de ce code fonctionne tres bien mais moi j'aimerai qu'a la suite de çà j'ajoute un bouton "Ajouter" et hop çà l'ajoute une autre fois a la suite.

comment puis je faire ?

J'ai encore pas vraiment trop toucher a javascript donc j'espere que jsuis pas a coté de la plaque ?

02/02/2006, 14h32
siddh

tu veux ajouter quoi ?

une option dans ton select ?

non en faite ma question n'ai pas assez complete

Alors dans un premier temps j'ai ce code là dans un <table>:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <tr> <td> <?php echo $produit; ?> </td> <td> <input type="text" name="quantite" size="10" /> </td> <td> <input type="text" name="prix" size="10" /> </td> </tr>
j'aimerai avoir un bouton ajouter et hop çà me refait exactement la meme chose a la suite

02/02/2006, 14h42
SpaceFrog

tu mets ce code dans un div en display none et tu en fait des cloneNode true et des appendChild ...
02/02/2006, 14h43
siddh

ben met un input de type button avec sur son onclick un appel de methode javascript qui va faire des insertRow.

Voilà, je t'ai donné les mots clés ;)
02/02/2006, 14h45
maximenet

j'ai 2 méthode là, laquelle serai la plus simple pour moi ?

euhh merci pour les mots clefs :D
02/02/2006, 14h47
siddh

ben ca depend surtout si tu veux reecrire absolument la meme ligne a chaque fois ou pas
02/02/2006, 14h48
SpaceFrog

ben je vais pas te dire que ma méthode n'est pas bonne ...
j'apporterais juste la modification suivante:
ne le mets pas dans un div mais utilise la balise tr en display none
02/02/2006, 14h50
SpaceFrog

ben même si c'est pas le même contenu dans les cellule siddh on peut toujours acceder au contenu ... firstChild.data ou innerHTML

par contre je recommande vivement l'utilisation d'un nodeCleaner avant ...
02/02/2006, 14h51
maximenet

oui c pour réecrire exactement la meme ligne a la suite des qu'on appuie sur le bouton ajouter

mais bon pour qlq'un qui conné pas trop la syntaxe javascript va falloir que je cherche un moment là avant d'appliquer une de vos méthodes jé l'impression
02/02/2006, 15h02
siddh

oui mais je voit pas l'interet de stocker un element pourle reproduire a l identique et ensuite en modifier le contenu ....

autant en recréer un de suite.

ou alors, quitte a utiliser innerHTML, qu'il stocke la chaine dans une variable et fasse du innerHTML avec ensuite

bon, vite fait alors:

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
<script type='text/javascript'>
function addline(){
var nvlleligne=document.getElementById('ligne').cloneNode(true);
nvlleligne.style.display='block';
document.getElementById('montableau').appendChild(nvlleligne);
}
 
 
</script>
</head>
 
<body>
<input type="button" onclick="addline()" value="ajouter" />
<table>
<tbody id="montableau">
<tr id="ligne" style="display:none;">
	<td> Prix: </td>
	<td> Qté: </td>
</tr>
</tbody>
</table>
 
 
</body>
</html>

02/02/2006, 15h12
maximenet

çà cété pour répondre à:siddh

Citation:

bah moi je cherche pas a modifier quoi que ce soit
enfin je pense que je ne demande pas qlq chose de bien compliquer

en gros disons que j'ai çà:

<tr><td></td></tr>

je veu juste reproduit çà à l'identique qd on click sur un bouton c tout

Merci bcq SpaceFrog, jvé tester ton code, enfin apres mon rdv chez ma coiffeuse de 15h30, bon jsuis en retard ++ je vous tiens au courant
02/02/2006, 16h25
maximenet

SpaceFrog c'est génial ton code encore Bravo çà marche impeccable :D

Maintenant j'aimerai dans une ligne créer que çà me créer un bouton pour supprimer la ligne dans laquelle se trouve le bouton:

Code:

<input name="Supprimer" type="button" value="Supprimer" onclick="document.getElementById('devis_facture').deleteRow()" />

Comment je pourrai faire pour que deleteRow() supprime tout le <tr> dans lequelle il se trouve ?
02/02/2006, 16h59
SpaceFrog

heu le bouton il est pas dans une ligne ... ...
enfin peut être dans ton code ...

mets un id à la ligne

Code:

<tr id='ligneabouton'>

=>

Code:

document.getElementById('ligneabouton').style.display='none'
02/02/2006, 17h16
maximenet

Y'a un truc que je pige pas avec le code que tu m'a fournis plus haut, c que des que je génere de nouvelles lignes, et si j'affiche la source de la page çà ne me met pas le changement fait par le javascript ?

y'a til possibilité que çà change la source ?
02/02/2006, 17h33
SpaceFrog

en php pas en javascript ...
02/02/2006, 17h36
maximenet

ah oué ok donc en javascript on ne peut pas modifier la source :/

bref jé encore du boulot et encore merci pour l'aide que vous m'avez apporter
02/02/2006, 17h38
SpaceFrog

en fait afficher source te colle le code de départ ...

maintenant si tu selectionne la page puis tu fais affiche la source du code selectionné, tu verras le code modifié ...

en faite j'ai un pb avec mon tableau que voici:

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
30
31
	<table>
	<thead>
	<tr><td align="center">Produit</td><td align="center">Quantité</td><td align="center">Prix HT</td><td align="center">Prix TTC</td></tr>
	</thead>
	<tbody id="montableau">
	<tr id="ligne" style="display:none">
	<td>
	<?php
                echo $produit;
        ?>
	</td>
	<td>
		<input type="text" name="quantite" size="10" />
	</td>
	<td>
		<input type="text" name="prix_ht" size="7"/>
	</td>
	<td>
		<input type="text" name="prix_ttc" size="7"/>
	</td>
	</tr>
	<tbody>
	<tfoot>
	<tr>
		<td colspan="4" align="left"><input type="button" onclick="addline()" value="Ajouter" /></td>
	</tr>
	<tr>
		<td colspan="4" align="center"><input type="submit" value="Valider" /></td>
	</tr>
	</tfoot>
	</table>

voilà le code javascript:

Code:

1
2
3
4
5
6
7
<script type='text/javascript'>
	function addline(){
		var nvlleligne=document.getElementById('ligne').cloneNode(true);
		nvlleligne.style.display='block';
		document.getElementById('montableau').appendChild(nvlleligne);
	}
</script>

donc en faite si j'ajoute une nouvelle ligne au tableau il me fait comme si le <td> de Produit avé le colspan égale au nombre de <td> que j'ajoute dans la ligne suivante, donc en gros il me décale tout quoi, comment je peut faire ?

03/02/2006, 08h52
SpaceFrog

???
j'ai testé ton code chez moi et tous les inputs sont bien sagement alignés ...

tu es sous quel navigateur ?

sinon force le colspan des td à 1
03/02/2006, 11h52
maximenet

ben je suis sur firefox

mais je viens de me rendre compte que çà fonctionne bien sous IE

bizarre çà qd meme, et meme si je force le colspan a 1 la cellule produit prend 4 colonnes qd meme :(