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. 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>
    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. 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. 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. 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. 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