Exploiter le DOM en JavaScript

Résolu
Bonjour à tous, je viens de commencer à apprendre le JavaScript dans le cadre de mon stage, je rencontre donc quelques difficultés...
J'aimerais récupérer la valeur d'une case à cocher, par le code source HTLM...

Ma fonction JavaScript :

function CAC_Montant(nomFormulaire) 
{ 
var montant = 0;
var res = 0;
var f = document.getElementById(nomFormulaire);
var longueur = f.length;
 
for(var i=0; i<longueur; i++)
{
      if(f.elements[i].checked){
       {    
  res = parseFloat(f.getElementsByTagName('div')[8].getAttribute("title"));
            montant = res + montant;
       }
     }
}
return(montant)
}


Un tr du code HTML

<tr id='taListeEncaissementsNonRapprLigne0' onclick='setLnActTb(this.id,"TbLnPr")' style='cursor:default;' class='TbLnPr' onmouseover='this.className="TbLnOv"' onmouseout='this.className="TbLnPr"'>
<td width=30 align='center'><input type='checkbox' id='cptTableSelecttaListeEncaissementsNonRappr_0' name='cptTableSelecttaListeEncaissementsNonRappr[]' value='1215725' onclick='setCptSltLstChbx("taListeEncaissementsNonRappr","cptTableSelecttaListeEncaissementsNonRappr[]")'>
</td>
<td align='center' style='width:15%' onclick=''>
<div class='celluleTable' title='1215725'>1215725</div>
</td>
<td align='center' style='width:10%' onclick=''>
<div class='celluleTable' title='X'>X</div>
</td>
<td align='center' style='width:15%' onclick=''>
<div class='celluleTable' title='4401'>4401</div>
</td>
<td align='center' style='width:15%' onclick=''>
<div class='celluleTable' title='13596932'>13596932</div>
</td>
<td align='center' style='width:15%' onclick=''>
<div class='celluleTable' title='29/10/2012'>29/10/2012</div>
</td>
<td align='center' style='width:15%' onclick=''>
<div class='celluleTable' title='29/10/2012'>29/10/2012</div>
</td>
<td align='center' style='width:15%' onclick=''>
<div class='celluleTable' title='75.00'>75.00</div>
</td>
</tr>


Ma fonction me retourne donc 75 à chaque fois... Et c'est normal car le ' res ' de ma fonction renvoie toujours le 8eme div.... Je n'arrive pas à partir du TR courant, afin de lui dire de ne regarder que les DIV qui s'y trouvent !

Si quelqu'un pouvait donc m'aider =)
Cordialement, Mallik.

6 réponses

  1. Ca fontionnnee!!!
    Merci beaucoup d'avoir prit du temps pour résoudre mon problème !
    Je suis bloquer dessus depuis jeudi je commençais à abandonner !
    Effectivement les checkbox / tr / td et div ne doivent pas être en relation :/
    Bien joué en tout cas, j'ai posté sur différent forum et tu es le seul à avoir apporté une bonne réponse !
    J'ai regarder ton code et je pense pas avoir réussi à faire ça tout seul, mais je l'ai compris ! :)
    Je marque le post comme résolu et merci encore d'avoir prit le temps de me répondre :)
    1. Ok,
      C'est bien que tu ai compris le principe de ce que j'ai fait.
      Bonne chance pour la suite.

      @lain
  2. avec childNodes j'ai pas réussi, car les div n'ont pas l'air d'être les fils des td ???

    avec cette solution ça marche:
    (j'ai bidouillé ton code pour pouvoir tester)
    
    <script type="text/javascript">
    function CAC_Montant(nomFormulaire) 
    { 
    	var montant1 = 0;
    	var obj;
    	var res = 0;
    	var f = document.getElementById(nomFormulaire);
    	
    	var longueur = f.length;
    	var montantReleve;
    	//var td = f.getElementsByTagName("td");
    	// montantReleve = f.getElementsByTagName('cptrapproIdReleveBancaire').getAttribute("value");
    
    	for(var i=0; i<longueur; i++)	{
    
    		  if(f.elements[i].checked){
    		   {
    		   //le pb c'est que ce qui est checked c'est l'input checkbox, pas le tr donc ce ne sont pas les fils de tr que l'on atteingnait mais les fils de <input type checkbox
    		   //il n'en a pas
    		   //donc il faut atteindre la tr concerné
    			//on met un id à l'input checkbox dont la terminaison numérique _n est identique a celle de l'id du tr
    			//recup de la partie num de l'id
    			var id_case=f.elements[i].id;
    			var array_n_id=id_case.split('_');
    			var n_id=array_n_id[1];
    			//on atteint le tr concerné, celui qui a la même terminaison numérique de l'id
    			var element_tr=document.getElementById('taListeEncaissementsNonRapprLigne'+n_id);
    			//et on va vers le 8 iéme td 
    			
    			var cel = element_tr.getElementsByTagName("td")[7];
    			// premier élément de la liste childNodes de cel
    			var element_div = cel.getElementsByTagName("div")[0];
    			var res = parseFloat(element_div.getAttribute('title'));
    			
    			alert(res);
    			// res = parseFloat(fils2[8].getAttribute("title"));
    					  montant1 = res + montant1;
    		   }
    		}
    	}
    	alert(montant1);
    	return(montant1);
    }
    </script>
    
    <form name="form1" id="form1" method="post" action="" >
    <table width="400"border="1">
    
    <tr id='taListeEncaissementsNonRapprLigne0'  style='cursor:default;' class='TbLnPr'>
    <td width="30" align='center'>
    	<input type='checkbox' id='cptTableSelecttaListeEncaissementsNonRappr_0' name='cptTableSelecttaListeEncaissementsNonRappr[]' value='1215725'>
    </td>
    <td align='center' style='width:15%' onclick=''>
    <div class='celluleTable' title='1215725'>1215725</div>
    </td>
    <td align='center' style='width:10%' onclick=''>
    <div class='celluleTable' title='X'>X</div>
    </td>
    <td align='center' style='width:15%' onclick=''>
    <div class='celluleTable' title='4401'>4401</div>
    </td>
    <td align='center' style='width:15%' onclick=''>
    <div class='celluleTable' title='13596932'>13596932</div>
    </td>
    <td align='center' style='width:15%' onclick=''>
    <div class='celluleTable' title='29/10/2012'>29/10/2012</div>
    </td>
    <td align='center' style='width:15%' onclick=''>
    <div class='celluleTable' title='29/10/2012'>29/10/2012</div>
    </td>
    <td align='center' style='width:15%' onclick=''>
    <div class='celluleTable' title='75.00'>75.00</div>
    </td>
    </tr>
    <tr id='taListeEncaissementsNonRapprLigne1' style='cursor:default;' class='TbLnPr' >
    <td width=30 align='center'><input type='checkbox' id='cptTableSelecttaListeEncaissementsNonRappr_1' name='cptTableSelecttaListeEncaissementsNonRappr[]' value='1215725' >
    </td>
    <td align='center' style='width:15%' onclick=''>
    <div class='celluleTable' title='85462310'>85462310</div>
    </td>
    <td align='center' style='width:10%' onclick=''>
    <div class='celluleTable' title='Y'>Y</div>
    </td>
    <td align='center' style='width:15%' onclick=''>
    <div class='celluleTable' title='5502'>5502</div>
    </td>
    <td align='center' style='width:15%' onclick=''>
    <div class='celluleTable' title='18655421'>18655421</div>
    </td>
    <td align='center' style='width:15%' onclick=''>
    <div class='celluleTable' title='02/10/2012'>02/10/2012</div>
    </td>
    <td align='center' style='width:15%' onclick=''>
    <div class='celluleTable' title='02/10/2012'>02/10/2012</div>
    </td>
    <td align='center' style='width:15%' onclick=''>
    <div class='celluleTable' title='150.00'>150.00</div>
    </td>
    </tr>
    </table>
    <input type="button" name="bt1" value="TEST" onclick="CAC_Montant('form1')"; />
    </form>
    
    1. Exact ! C'est au niveau des TR que j'ai plusieurs div, petite erreur =)

      J'ai essayer avec fils2[0] et toujours cette même réponse, 0 a la valeur null ou n'est pas un objet. :/

      Je continu de tenter des choses sur cette voie !
      1. var fils2 = fils.childNodes;
        res = parseFloat(fils2[8].getAttribute("title"));


        en deuxième niveau les fils de <td> tu n' a qu'un seul <div>

        essaie:
        res = parseFloat(fils2[0].getAttribute("title"));
        1. Merci d'avoir répondu =)

          Je me suis renseigner sur le childNodes, j'ai donc tester avec le premier niveau puis en descendent au second niveau, mais la réponse est toujours la même
          : 8 a la valeur null ou n'est pas un objet.

          Je crois bien avoir tout essayer mais impossible d'atteindre ce deuxième niveau pour accéder aux div :/

          Et quand j'essaie avec plusieurs getElementsByTagName j'ai également une erreur : cet objet ne gère pas cette propriété ou méthode

          Voici plusieurs de mes test :

          function CAC_Montant(nomFormulaire) 
          { 
          var montant1 = 0;
          var obj;
          var res = 0;
          var f = document.getElementById(nomFormulaire);
          var longueur = f.length;
          var montantReleve;
          var td = f.getElementsByTagName("td");
          // montantReleve = f.getElementsByTagName('cptrapproIdReleveBancaire').getAttribute("value");
          
          for(var i=0; i<longueur; i++)
          {
          
                if(f.elements[i].checked){
                 {	
                 	//	obj = f.getElementsByTagName('td')[i];
              	//	res = document.getElementById('taListeEncaissementsNonRapprLigne'+[i].getAttribute("class");
          		//	alert(res);
          		//res = parseFloat(f.getElementsByTagName('div')[8].getAttribute("title"));
          		//.getElementsByTagName('div')[5].getAttribute("title"));
                  //alert(res);
                      
          		//var fils = f.childNodes;
          		//var nbFils = fils.length;
          		
          		//for(var i = 0; i < nbFils; i++){
            		//document(fils[i]);
          		//}
          		//var div = td[i].getElementsByTagName("div");
          		// res = div[8].getAttribute("title");
          	
          		//var fils2 = fils.childNodes;
          		//res = parseFloat(fils[i].childNodes[8].getAttribute("title"));
          
          
          var fils = f.elements[i].childNodes;
          		var fils2 = fils.childNodes;
          	  res = parseFloat(fils2[8].getAttribute("title"));
          		alert(res);
          	 	// res = parseFloat(fils2[8].getAttribute("title"));
          	              montant1 = res + montant1;
                 }
           	}
          }
          alert(montant1);
          return(montant1)
          }


          Toutes ces tentatives me renvoi une erreur. Et quand j'arrive à accéder au title de mon div, c'est seulement au 8eme de la page, jamais sur mon tr courant :(
          Désolé pour le code en vrac, mais si ça peut inspirer autant le mettre =)
          1. essaie en passant par childNodes (il faudra peut être descendre de deux niveaux tr->td->div ??

            <script type="text/javascript">
            function CAC_Montant(nomFormulaire) 
            { 
            	var montant = 0;
            	var res = 0;
            	var f = document.getElementById(nomFormulaire);
            	var longueur = f.length;
            	 
            	for(var i=0; i<longueur; i++)
            	{
            		  if(f.elements[i].checked){
            		   { 
            			var fils = f.elements[i].childNodes;
            		
            	  res = parseFloat(fils[8].getAttribute("title"));
            				montant = res + montant;
            		   }
            		 }
            	}
            	return(montant)
            }
            
            </script>