IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Récupérer les cases cochées


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2010
    Messages : 106
    Par défaut Récupérer les cases cochées
    Bonjour à tous,

    Voilà, je suis un débutant en JS, et j'aurai besoin d'éclaircissement concernant mon problème car après avoir lu pleins de choses sur le Web, je suis un peu perdu.
    En fait, j'aimerai prendre en compte les cases qui peuvent être sélectionnées par l'utilisateur final de l'application. Je vous met le visuel de l'appli telle qu'elle est actuellement. Je vous mets aussi mon code JS qui permet de produire un fichier XML en fonction des lignes affichées.
    MON BUT ? ---> Ce que je souhaite, c'est produire le même résultat mais au lieu de prendre en compte les lignes ($(selector) .find("tr").each( .......)), c'est prendre en compte les cases qui vont être cochées.

    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
    <tr>
    					<td class="area">${b.area}</td> 
    					<td class="position">${b.position}</td> 
    					<td class="elecroute">${b.elecroute}</td>	 
    					<!-- <td><input type="checkbox" name="BS1" id="BS1" />
    						<!--<label for="BS1"></label> -->
     
    					<td class="bsolution1">${b.bsolution1}</td>
    					<td><input type="checkbox" name="BS1" id="BS1" />
    						<label for="BS1"></label>							
    					</td>								
    					<td><img src="image/${b.bsolution1}" width="220px" height="140px"/></td> <!-- 160/100 - Initialement : width="220px" height="140px / b.bsolution1, b.img1 ne fonctionne pas -->						
     
     
    					<td class="bsolution2">${b.bsolution2}</td>
    					<td><input type="checkbox" name="BS2" id="BS2" /> 
    						<label for="BS2"></label>
    					</td>														
    					<td><img src="image/${b.bsolution2}" width="220px" height="140px"/></td>		 
     
     
    					<td class="bsolution3">${b.bsolution3}</td>
    					<td><input type="checkbox" name="BS3" id="BS3" />
    						<label for="BS3"></label>
    					</td>														
    					<td><img src="image/${b.bsolution3}" width="220px" height="140px"/></td>
     
     
    					<td class="bsolution4">${b.bsolution4}</td>
    					<td><input type="checkbox" name="BS4" id="BS4" />
    						<label for="BS4"></label>
    					</td>															
    					<td><img src="image/${b.bsolution4}" width="220px" height="140px"/></td> 		
     
     
    					<td class="bsolution5">${b.bsolution5}</td>
    					<td><input type="checkbox" name="BS5" id="BS5" />
    						<label for="BS5"></label>					
    					</td>
    					<td><img src="image/${b.bsolution5}" width="220px" height="140px"/></td>

    CODE JS :
    Code : 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
    <script type="text/javascript">
                        function encodeAndEscapeXML(string) { 
                                if ($.trim(string) != "") {
                                   /*string = string.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, """).replace(/'/g, "'");*/
                                    string = string.replace(/&(?!(amp;)|(lt;)|(gt;)|(quot;)|(#39;)|(apos;))/g, "&amp;");
                                    string = string.replace(/([^\\])((\\\\)*)\\(?![\\/{])/g, "$1\\\\$2");  //replaces odd backslash(\\) with even.
                                }
                                else {
                                    string = "";
                                }
                            return string;
                        }
     
                        function tableToXML(selector) {
                				var indent="    ";
                				var backslah="\n";
                            	var xml = "<airbus>" + "\n";	                       
                            	var bracket_id=0;                         	
     
                            $(selector) .find("tr").each(  
     
                                    function() {
     
    										xml += "\n<Bracket id=" + '"' + bracket_id++ + '"'  + " >";  
     
                                            $(this).find("td.area").each(
                                                    function() {
                                                            xml+= backslah + indent + "<area name=" + '"' + encodeAndEscapeXML($(this).html()) + '"'  + " />"; 
                                                    }); 
     
                                            $(this).find("td.position").each(
                                            		function(){
                                            			xml+= backslah + indent + "<position name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            		});
     
                                            $(this).find("td.elecroute").each(
                                            		function(){
                                            			xml+= backslah + indent + "<elecroute name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            		});
                            		/*  bracketSolution1  */		
                                            $(this).find("td.bsolution1").each(
                                            		function(){
                                            			xml+= backslah + indent + "<bracketSolution1 name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " >"; 
                                            		});
     
                                            $(this).find("td.bsolution1").each( 
                                            		function(){
                                            			xml+= backslah + indent + indent + "<picture path=" + '"' + encodeAndEscapeXML($(this).html()) + ".png" + '"' + " />"; 
                                            		});
                                            $(this).find("td.bsolution1").each(    
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef1BS1 name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}  
     
                                            		});
    Comment puis-je mettre en place pour que ca fonctionne ? Je pense peut-être que le changement peut s'opérer au niveau de la ligne 20 : $(selector) .find("tr").each
    J'ai essayé ça mais en vain : $(selector) .find("tr").each.checked=true

    En fait, j'aimerai récupérer la valeur de la colonne juste avant (E039-5 par exemple) pour le 1er check, et ainsi de suite ...
    Images attachées Images attachées  

  2. #2
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    ...
    j'imagine que tu veux une réponse en jQuery plutôt qu'en JavaScript pur
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    $("input:checked").each(function() {
         .............<= $(this).attr("name");

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2010
    Messages : 106
    Par défaut Réponse aux commentaires
    Merci pour ta réponse.
    Vu que j'ai commencé avec du code JavaScript, je souhaite dans l'idée continuer. Après je ne sais pas trop la plus value qu'aurai JQuery !

    Au niveau de ton code : $("input:checked").each(function() , je remplacais mon code : $(this).find("td.bsolution1").each( par ta solution :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    $("input:checked").find("td.bsolution1").each(
                                            function(){
                                        xml+= backslah + indent + "<bracketSolution1 name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " >"; 
    })
    ;

    ---> Ca ne fonctionne pas !

  4. #4
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    Logique, bsolution1 n'est pas à l'intérieur de l'élément input..

    qu'est ce qu'il y a dans ${b.bsolution1} ? une phrase pouvant faire 10 km ??

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2010
    Messages : 106
    Par défaut Réponse aux commentaires
    Oui effectivement tu as raison ! Oupsss

    J'ai crée une fonction mais je ne sais pas comment l'utiliser dans mon cas. Je vous montre (function checked() ) :
    Code : 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
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    <script type="text/javascript">
                        function encodeAndEscapeXML(string) { 
                                if ($.trim(string) != "") {
                                   /*string = string.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, """).replace(/'/g, "'");*/
                                    string = string.replace(/&(?!(amp;)|(lt;)|(gt;)|(quot;)|(#39;)|(apos;))/g, "&amp;");
                                    string = string.replace(/([^\\])((\\\\)*)\\(?![\\/{])/g, "$1\\\\$2");  //replaces odd backslash(\\) with even.
                                }
                                else {
                                    string = "";
                                }
                            return string;
                        }
     
                        function tableToXML(selector) {
                				var indent="    ";
                				var backslah="\n";
                            	var xml = "<airbus>" + "\n";	                       
                            	var bracket_id=0;                         	
     
                            $(selector) .find("tr").each(  
     
                                    function() {
     
    					xml += "\n<Bracket id=" + '"' + bracket_id++ + '"'  + " >";  
     
                                            $(this).find("td.area").each(
                                                    function() {
                                                            xml+= backslah + indent + "<area name=" + '"' + encodeAndEscapeXML($(this).html()) + '"'  + " />"; 
                                                    }); 
     
                                            $(this).find("td.position").each(
                                            		function(){
                                            			xml+= backslah + indent + "<position name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            		});
     
                                            $(this).find("td.elecroute").each(
                                            		function(){
                                            			xml+= backslah + indent + "<elecroute name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            		});
                            		/*  bracketSolution1  */		
                                            $(this).find("td.bsolution1").each(
                                            		function(){
                                            			xml+= backslah + indent + "<bracketSolution1 name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " >"; 
                                            		});
     
                                            $(this).find("td.bsolution1").each( 
                                            		function(){
                                            			xml+= backslah + indent + indent + "<picture path=" + '"' + encodeAndEscapeXML($(this).html()) + ".png" + '"' + " />"; 
                                            		});
                                            $(this).find("td.bsolution1").each(    
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef1BS1 name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}  
     
                                            		});        
     
                                            $(this).find("td.bsolution2").each(
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef2BS1 name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}  
                                            	});                                                                                 
     
                                            $(this).find("td.bsolution2").each(
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef3BS1 name =" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}   
                                            	}); 
     
     
                                            $(this).find("td.bsolution2").each(
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef4BS1 name =" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}         
                                            		});
     
                                            $(this).find("td.bsolution2").each(
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef5BS1 name =" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}         
                                            		}); 
     
                                            $(this).find("td.bsolution2").each(
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef6BS1 name =" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}         
                                            		});
     
                                            $(this).find("td.bsolution2").each(
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef7BS1 name =" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}         
                                            		});
     
                                            xml += backslah + indent + "</bracketSolution1>";
    xml += backslah + "</Bracket>"                                    
     
                                 });
     
     
                            xml += "\n</airbus>"; 
                            return xml;
                    	} 
     
            function saveXMLFile (name, data) {
                    saveFile(name, 'text/xml, application/xml', data);
            }
            function saveFile (name, type, data) {
                                if (data != null && navigator.msSaveBlob)
                                    return navigator.msSaveBlob(new Blob([data], { type: type }), name);
                                var $a = $("<a style='display: none;'/>");
                                var url = window.URL.createObjectURL(new Blob([data], {type: type}));
                                $a.attr("href", url);
                                $a.attr("download", name);
                                $("body").append($a);
                                $a[0].click();
                                window.URL.revokeObjectURL(url);
                                $a.remove();
                    }
     
            /* Fonction pour mes checked */
            function checked() {
     
            	var checkbox1 = document.getElementById('BS1');
            	var checkbox2 = document.getElementById('BS2');
            	var checkbox3 = document.getElementById('BS3');
            	var checkbox4 = document.getElementById('BS4');
            	var checkbox5 = document.getElementById('BS5');
     
            	var general = checkbox1 + checkbox2 + checkbox3 + checkbox4 + checkbox5;
     
            	if(checkbox1.checked == true){
            		alert("Tu as sélectionné : B.Solution 1 !!! ");
            	} else if(checkbox2.checked == true){
            		alert("Tu as sélectionné : B.Solution 2 !!! ");
            	} else if(checkbox3.checked == true){
            		alert("Tu as sélectionné : B.Solution 3 !!! ");
            	} else if(checkbox4.checked == true){
            		alert("Tu as sélectionné : B.Solution 4 !!! ");
            	} else if(checkbox5.checked == true){
            		alert("Tu as sélectionné : B.Solution 5 !!! ");
            	} 
            	else if(general != true){
            		alert("You have to select at least a checkbox ");
            	}
            }
     
     
     
            $( document ).ready(function() {
     
     
                    $("#test1").click(function() {		/* #test1 : C'est le name de l'input */
                    		checked();                  		
                                    saveXMLFile("XmlFileToCatia.xml", tableToXML("#table"));
     
                    });
     
     
             });
     
    </script>
    J'ai mis des alert(), c'était pour tester dans un premier temps, donc ne le prenez pas en compte. J'ai une idée, j'aimerai avoir votre avis. Si je fais :

    Code : 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
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    if(checkbox1.checked == true ) {
     
         $(this) .find("tr").each(  
     
             xml += "\n<Bracket id=" + '"' + bracket_id++ + '"'  + " >";  
     
                                            $(this).find("td.area").each(
                                                    function() {
                                                            xml+= backslah + indent + "<area name=" + '"' + encodeAndEscapeXML($(this).html()) + '"'  + " />"; 
                                                    }); 
     
                                            $(this).find("td.position").each(
                                            		function(){
                                            			xml+= backslah + indent + "<position name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            		});
     
                                            $(this).find("td.elecroute").each(
                                            		function(){
                                            			xml+= backslah + indent + "<elecroute name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            		});
                            		/*  bracketSolution1  */		
                                            $(this).find("td.bsolution1").each(
                                            		function(){
                                            			xml+= backslah + indent + "<bracketSolution1 name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " >"; 
                                            		});
     
                                            $(this).find("td.bsolution1").each( 
                                            		function(){
                                            			xml+= backslah + indent + indent + "<picture path=" + '"' + encodeAndEscapeXML($(this).html()) + ".png" + '"' + " />"; 
                                            		});
                                            $(this).find("td.bsolution1").each(    
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef1BS1 name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}  
     
                                            		});        
     
                                            $(this).find("td.bsolution2").each(
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef2BS1 name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}  
                                            	});                                                                                 
     
                                            $(this).find("td.bsolution2").each(
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef3BS1 name =" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}   
                                            	}); 
     
     
                                            $(this).find("td.bsolution2").each(
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef4BS1 name =" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}         
                                            		});
     
                                            $(this).find("td.bsolution2").each(
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef5BS1 name =" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}         
                                            		}); 
     
                                            $(this).find("td.bsolution2").each(
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef6BS1 name =" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}         
                                            		});
     
                                            $(this).find("td.bsolution2").each(
                                            		function(){
                                            			if( $(this).html().startsWith("E",0)) { 
                                            				xml+= backslah + indent + indent + "<partsRef7BS1 name =" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            			} else {
                                            				$(this).remove();
                                            			}         
                                            		});
     
                                            xml += backslah + indent + "</bracketSolution1>";
    xml += backslah + "</Bracket>"                                                                  
         );
    } else if (checkbox2.checked == true) {
     
    /*meme debut avec : area,position,elecroute et bracketSolution2 */
     
    } else if (checkbox3.checked == true) {
    /* area,position,elecroute et bracketSolution3   */
     
    } else if (checkbox4.checked == true) {
    /* area,position,elecroute et bracketSolution4   */
     
    } else if (checkbox5.checked == true) {
    /* area,position,elecroute et bracketSolution5
    }
    Est ce que cela est possible, probable, cohérent, faisable ?

  6. #6
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    faisable sans doute , mais vraiment compliqué pour pas grand chose.

    et je répète ma question :
    qu'est ce qu'il y a dans ${b.bsolution1} ? une phrase pouvant faire 10 km ??
    parce que si c'est juste moins d une douzaine de caracters tu pourrais la mettre dans un champs data du checkbox..
    D'ailleurs je vois pas pourquoi tu utilise des classes différentes pour tous tes td alors que visiblement tu t'en sert comme étant des ID.. ???

    => 3 questions donc 3 réponses stp.

  7. #7
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 100
    Par défaut
    Bonjour,

    Citation Envoyé par fredbubu65 Voir le message
    Voilà, je suis un débutant en JS,
    En graphisme aussi apparemment Comic Sans, histoire d’une typographie controversée.
    Ne le prends pas mal, j’ai fait cette erreur moi aussi.

    Bonne journée
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    tu as un problème de logique dans ton raisonnement.
    Si l'on regarde ce que tu génères on voit qu'il faut que tu sortes de ta boucle l'écriture de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
       <area name="TypFus Pax Floor" />
        <position name="On Crossbeams" />
        <elecroute name="S " />
    ensuite il te faut boucler sur les données de <bracketSolution en n'oubliant pas d'incrémenter l'indice.

    Comme il est souvent dit en ce moment, papier et crayon (gomme éventuelle) sont des outils indispensables pour clarifier les choses.

  9. #9
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2010
    Messages : 106
    Par défaut Réponse aux commentaires
    NoSmoking j'ai pas compris ce que tu m'a dit.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <area name="TypFus Pax Floor" />
    <position name="On Crossbeams" />
    <elecroute name="S " />
    Ca c'est ce que je récupérais avant de faire : $("input:checked").each( ) ... C'est quand je faisais $(selector).find("tr").each() que ca marche bien.

    Donc puis-je avoir du code JS pour bien comprendre stp ?

    De plus, j'ai essayé ce code mais il ne fonctionne pas. J'aimerai ne pas avoir les lignes qui sont vides dans mon fichier XML !!! J'aimerai avoir que les bsolution cochées
    Fichier XML produit :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <bracketSolution name=""  />
        <bracketSolution name=""  />
        <bracketSolution name=""  />
        <bracketSolution name="E039-5"  />
        <bracketSolution name="E019-5"  />
        <bracketSolution name="E268-5"  />
    Code JS : Si je mets ce code, y a plus rien dans mon XML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $("input:checked").each(                        		                          	
     
                                    function() {    
                                    	if( $(this).checked == true) { 
                                    		xml += backslah + indent + '<bracketSolution name="' + encodeAndEscapeXML( $(this).data("bsolution") ) + '"  />';	
                                    	} else {
                                    		$(this).remove();
                                    	}
                                     });
     
                                return xml;
                        	}

  10. #10
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2010
    Messages : 106
    Par défaut Réponse aux commentaires
    Je mets le code qui fonctionne concernant les checked. Il fonctionne car si je coche les B.S je les récupère bien. Le seul soucis c'est que ces lignes récupérées des checked j'aimerai les insérer après chaque <bracketSolution>. Je vais quand même essayer de mon côté et je vous tiens au courant.

    Ancien code XML produit avant d'avoir fait le code des checked (aujourd'hui j'ai mis ce code en commentaire pour le test des checked):

    Code : 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
    <area name="TypFus Pax Floor"  />
        <position name=""  />
        <elecroute name=""  />
        <bracketSolution name=""  />
        <area name=""  />
        <position name="Along Crossbeams"  />
        <elecroute name=""  />
        <bracketSolution name=""  />
        <area name=""  />
        <position name=""  />
        <elecroute name="S "  />
        <bracketSolution name=""  />
        <area name=""  />
        <position name=""  />
        <elecroute name=""  />
        <bracketSolution name="E039-5"  />
        <area name=""  />
        <position name=""  />
        <elecroute name=""  />
        <bracketSolution name="E019-5"  />
        <area name=""  />
        <position name=""  />
        <elecroute name=""  />
        <bracketSolution name="E268-5"  />
    Code JS qui produit l'XML ci-dessus :

    Code : 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
    xml += "\n<Bracket id=" + '"' + bracket_id++ + '"'  + " >";  
     
                                            $(this).find("td.area").each(                                       	                                      		                                      	
                                                    function() {
                                                            xml+= backslah + indent + "<area name=" + '"' + encodeAndEscapeXML($(this).html()) + '"'  + " />"; 
                                                    }); 
     
                                            $(this).find("td.position").each(
                                            		function(){
                                            			xml+= backslah + indent + "<position name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            		});
     
                                            $(this).find("td.elecroute").each(
                                            		function(){
                                            			xml+= backslah + indent + "<elecroute name=" + '"' + encodeAndEscapeXML($(this).html()) + '"' + " />"; 
                                            		});
                            		/*  bracketSolution1 		
                                            $(this).find("td.bsolution1").each(  
                                            		
                                            		function(){                                       			
                                            			if($(this).checked == true){  
                                            			xml+= backslah + indent + "<bracketSolution1 name=" + '"' + encodeAndEscapeXML($(this).data("bsolution")) + '"' + " >"; 
                                            			} else{
                                            				$(this).remove();
                                            			}
                                            	/*	XML_str += '<bracketSolution1 name="' + encodeAndEscapeXML( $(this).data("bsolution") ) + '"  />';  
                                            		});
    Code avec seulement les checked récupérés :

    Code : 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
    function tableToXML(selector) {
                				var indent="    ";
                				var backslah="\n";
                            	var xml = "<airbus>" + "\n";	                       
                            	var bracket_id=0; 
                            	var XML_str = "";
     
                          /*  $(selector).find("tr").each( */  
     
                          /*	xml += "\n<Bracket id=" + '"' + bracket_id++ + '"'  + " >";   */	 
     
                            $("input:checked").each(                        		                          	
     
                                    function() {    
     
                                    	XML_str += backslah + indent + '<bracketSolution name="' + encodeAndEscapeXML( $(this).data("bsolution") ) + '"  />';	
     
                                    	});
     
     
                            /*    xml += "\n</airbus>";   */ 
                                return XML_str;
     
                        	}
    XML PRODUIT :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <bracketSolution name=""  />
        <bracketSolution name=""  />
        <bracketSolution name=""  />
        <bracketSolution name="E039-5"  />
        <bracketSolution name="E019-5"  />
        <bracketSolution name="E268-5"  />

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    J'ai un peu de mal à voir la façon que tu as de fonctionner.

    Il faut que tu partes de ce que tu veux obtenir comme arborescence de ton code XML, ce qui n'est toujours pas très clair pour moi, et réfléchir à comment y arriver.

    Je vais prendre cet exemple, +/- issu de ce que je vois, je veux obtenir au final :
    Code xml : 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
    <root>
        <bracket id="1">
            <area name = "${b.area}"/>
            <position name = "${b.position}"/>
            <elecroute name = "${b.elecroute}"/>
            <solution-1>
                <reference name="BS1" description="${b.bsolution1}"/>
                <image name="BS1" description="$%7Bb.bsolution1%7D"/>
            </solution-1>
            <solution-2>
                <reference name="BS3" description="${b.bsolution3}"/>
                <image name="BS3" description="$%7Bb.bsolution3%7D"/>
            </solution-2>
            <solution-3>
                <reference name="BS5" description="${b.bsolution5}"/>
                <image name="BS5" description="$%7Bb.bsolution5%7D"/>
            </solution-3>
        </bracket>
        <bracket id="2">
            <area name = "${b.area}"/>
            <position name = "${b.position}"/>
            <elecroute name = "${b.elecroute}"/>
            <solution-1>
                <reference name="BS2" description="${b.bsolution2}"/>
                <image name="BS2" description="$%7Bb.bsolution2%7D"/>
            </solution-1>
            <solution-2>
                <reference name="BS4" description="${b.bsolution4}"/>
                <image name="BS4" description="$%7Bb.bsolution4%7D"/>
            </solution-2>
        </bracket>
    </root>
    les données sont un peu n'importe quoi mais c'est pour l'exemple.

    Au passage je trouve qu'il y a beaucoup d'ID ou autre indice qui à mon sens ne servent à rien.

    Maintenant ce que j'en conclu est que :
    Pour chaque ligne de ma <table>
    Si il y a un ou plusieurs <input checked>
    - Je récupères le contenu « area » (colonne 1), « position » (colonne 2) et « elecroute » (colonne 3) de la ligne.
    Pour chaque <input checked>
    - Je récupères la « reference » (cellule avant l'input) et l'« image » (cellule après l'input) qui y sont associées.

    Voilà un schéma qui me paraît cohérent, les mots clés apparaissant clairement.

    Maintenant il est « plus facile », tout étant relatif bien sûr, de coder la fonction.

    Exemple de ce que cela pourrait donner en JavaScript Vanilla :
    Code : 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
    function getXML() {
      "use strict";
      var NEWLINE = "\n";
      var TAB = "\t";
      var TAB_2 = TAB + TAB;
      var TAB_3 = TAB + TAB_2;
     
      var oTable = document.querySelector("table");
      var oRows = oTable.rows;
      var nbLignes = oRows.length;
      var lig;
      var oRow;
     
      var str;
      var oElems;
      var tdChecked;
      var tdReference;
      var tdImage;
     
      var indBracket = 1;
      var indSolution;
      var i;
     
      str = '<root>' + NEWLINE;
      // parcours de toutes les lignes
      for (lig = 1 /* on saute les titres */; lig < nbLignes; lig += 1) {
        // réf. de la ligne concernée
        oRow = oRows[lig];
        // récup. des élements checked de la ligne
        oElems = oRow.querySelectorAll("input:checked");
        // si au moins un élément checked
        if (oElems.length) {
          indSolution = 1;
          // ouverture balise
          str += TAB + '<bracket id="' + indBracket + '">' + NEWLINE;
          // récup. entête
          str += TAB_2 + '<area name = "' + oRow.cells[0].textContent + '"/>' + NEWLINE;
          str += TAB_2 + '<position name = "' + oRow.cells[1].textContent + '"/>' + NEWLINE;
          str += TAB_2 + '<elecroute name = "' + oRow.cells[2].textContent + '"/>' + NEWLINE;
          // parcours des éléments checked
          for (i = 0; i < oElems.length; i += 1) {
            // récupération des <td> concernées
            tdChecked = oElems[i].parentNode;
            tdReference = tdChecked.previousElementSibling;
            tdImage = tdChecked.nextElementSibling;
            // ouverture balise
            str += TAB_2 + '<solution-' + indSolution + '>' + NEWLINE;
              // récup. référence solution
              str += TAB_3 + '<reference name="' + oElems[i].name + '" ' + 'description="' + tdReference.textContent + '"/>' + NEWLINE;
              // récup. path image
              str += TAB_3 + '<image name="' + oElems[i].name + '" ' + 'description="' + tdImage.firstElementChild.src + '"/>' + NEWLINE;
            // fermeture balise
            str += TAB_2 + '</solution-' + indSolution + '>' + NEWLINE;
            indSolution += 1;
          }
          // fermeture balise
          str += TAB + '</bracket>' + NEWLINE;
          indBracket += 1;
        }
      }
      str += '</root>';
      return str;
    }
    Le code est abondamment commenté et libre à toi de le transposer en jQuery.

    Bonne continuation

Discussions similaires

  1. [MooTools] Récupérer les cases cochées dans un QuickForm
    Par tigunn dans le forum Bibliothèques & Frameworks
    Réponses: 7
    Dernier message: 28/11/2011, 15h23
  2. Réponses: 3
    Dernier message: 13/05/2008, 12h57
  3. Réponses: 4
    Dernier message: 20/08/2007, 01h16
  4. Réponses: 2
    Dernier message: 27/07/2007, 18h37
  5. Réponses: 7
    Dernier message: 21/05/2007, 09h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo