Cloner une ligne html avec checkbox
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:
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:
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 ;)
