Discussion :

[Bboop]

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 />&nbsp;</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 />&nbsp;</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 />&nbsp;</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

[SylvainPV]

Et bien tu as plusieurs façons de procéder, tu peux par exemple :
-garder une référence à une ligne "vierge" au moment de l'initialisation, puis cloner cette référence à chaque ajout. Un élément DOM peut être manipulé en Javascript sans forcément qu'il soit présent dans la page
-compléter ta fonction d'ajout en forçant la réinitialisation des checkbox avant l'appendChild
-refactorer ton code pour ne plus te baser sur un cloneNode mais sur une fonction qui crée à la demande ta nouvelle ligne en partant de rien. L'avantage est que ce code fonctionnerait pour un tableau initialement vide (aucune ligne)