Bonjour,
Je préparer un formulaire et j'offre la possibilité à l'utilisateur de pouvoir ajouter un nouveau produit pour lequel il peut cocher plusieurs caractéristiques différentes grâce à des checkbox. Ma difficulté est que lorsque l'utilisateur décide de cliquer sur ajouter un autre produit, la ligne se duplique bien mais avec les checkbox cochés pour le produit précédent. Voici le code pour ajouter la ligne et la supprimer aussi :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 window.onload = dtableInit; /* initialise le script */ function dtableInit() { var table = document.getElementsByTagName('TABLE'); for ( var i = 0; i < table.length; i++ ) { // on récupère tous les tableaux dynamiques if ( table[i].className = 'dTable' ) { var tbody = table[i].tBodies[0]; var newTr = tbody.rows[0].cloneNode(true); // on masque la première ligne du tbody (la ligne de reference) tbody.rows[0].style.display = 'none'; // on en ajoute une tbody.appendChild(newTr); } } } /* trouve le tag "parentTagName" parent de "element" */ function getParent(element, parentTagName) { if ( ! element ) return null; else if ( element.nodeType == 1 && element.tagName.toLowerCase() == parentTagName.toLowerCase() ) return element; else return getParent(element.parentNode, parentTagName); } /* ajoute une ligne */ function addLigne(link) { // 1. récuperer le node "TABLE" à manipuler var td = link.parentNode; var table = getParent(td,'TABLE'); // 2. on va manipuler le TBODY var tbody = table.tBodies[0]; // 3. on clone la ligne de reference var newTr = tbody.rows[0].cloneNode(true); tbody.appendChild(newTr); /*** Ajout d une ligne de separation ***/ var ligne = document.createElement("hr"); ligne.style.width = "75%"; ligne.style.color = "#A1B2C3"; elForm.insertBefore(ligne, objBouton); if ( document.all ) // pour IE newTr.style.display = "block"; else newTr.style.display = "table-row"; // pour Gecko } /* supprimer une ligne */ function delLigne(link) { // 1. récuperer le node "TABLE" à manipuler var td = link.parentNode; var table = getParent(td, 'TABLE'); // 2. récuperer le TBODY var tbody = table.tBodies[0]; // 3. Supprimer le TR tbody.removeChild(getParent(td, 'TR')); }
et la partie du formulaire à dupliquer si l'utilisateur souhaite rajouter un autre produit :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60 <table class="dTable"> <thead> </thead> <tfoot> <tr> <th colspan="16"> <br /> <a href="#" onClick="addLigne(this); return false;" class="button blue smallBouton" style="cursor:pointer;margin-left:0px">Other vial</a> <br /><br /></th> </tr> </tfoot> <tbody> <tr> <td width="117" valign="top"><strong>Vials volume</strong><br /> <strong>Vials type</strong><br /> <strong>Thread diameter</strong><br /> <strong>Material</strong> <br /></td> <td width="72" valign="top">2ml<br />Screw<br />8mm<br />Clear Glass</td> <td width="27" valign="top"> <input type="checkbox" name="vial[]" value="vial_volume_2ml" style="margin:1px;"/><br /> <input type="checkbox" name="vial[]" value="vial_type_screw" style="margin:1px;"/><br /> <input type="checkbox" name="vial[]" value="thread_diameter_8mm" style="margin:1px;"/><br /> <input type="checkbox" name="vial[]" value="material_clear_glass" style="margin:1px;"/></td> <td width="4" valign="top"><br /> <br /><br /> </td> <td width="74" valign="top">4ml<br /> Crimp<br />9mm<br />Amber Glass</td> <td width="27" valign="top"> <input type="checkbox" name="vial[]" value="vial_volume_4ml" style="margin:1px;"/><br /> <input type="checkbox" name="vial[]" value="vial_type_crimp" style="margin:1px;"/><br /> <input type="checkbox" name="vial[]" value="thread_diameter_9mm" style="margin:1px;"/><br /> <input type="checkbox" name="vial[]" value="material_amber_glass" style="margin:1px;"/></td> <td width="3" valign="top"><br /> <br /><br /> </td> <td width="80" valign="top">10ml<br /> <br />10mm<br />Polypropylene</td> <td width="27" valign="top" > <input type="checkbox" name="vial[]" value="vial_volume_10ml" style="margin:1px;"/><br /><br /> <input type="checkbox" name="vial[]" value="thread_diameter_10mm" style="margin:1px;"/><br /> <input type="checkbox" name="vial[]" value="material_polypropylene" style="margin:1px;"/></td> <td width="3" valign="top"><br /> <br /><br /><br /> </td> <td width="60" valign="top">20ml<br /> <br/>13mm<br /><br /></td> <td width="27" valign="top"> <input type="checkbox" name="vial[]" value="vial_volume_20ml" style="margin:1px;"/><br/><br/> <input type="checkbox" name="vial[]" value="thread_diameter_13mm" style="margin:1px;"/><br /><br /></td> <td width="2" valign="top"/> <br /><br /></td> <td width="33" valign="top">Other <br /> <br /> <br /><br /></td> <td width="26" valign="top"> <input type="checkbox" name="vial[]" value="vial_volume_other" style="margin:1px;"/><br /><br /><br /><br /></td> <td width="100" valign="bottom"><a onClick="delLigne(this); return false;" href="#" class="lien"><img src="corbeille.png" width="17" height="17" border=0 align="left" class="image_co">Supprimer</a></td> </tr> </tbody> </table>
Merci d'avance à ceux qui auront un petit peu de temps à me consacrer
Partager