Exploiter le DOM en JavaScript [Résolu/Fermé]

Signaler
Messages postés
4
Date d'inscription
lundi 11 mars 2013
Statut
Membre
Dernière intervention
13 mars 2013
-
Messages postés
5374
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
-
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

Messages postés
5374
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
873
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>
Messages postés
4
Date d'inscription
lundi 11 mars 2013
Statut
Membre
Dernière intervention
13 mars 2013

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 =)
Messages postés
5374
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
873
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"));
Messages postés
4
Date d'inscription
lundi 11 mars 2013
Statut
Membre
Dernière intervention
13 mars 2013

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 !
Messages postés
5374
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
873
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>
Messages postés
4
Date d'inscription
lundi 11 mars 2013
Statut
Membre
Dernière intervention
13 mars 2013

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 :)
Messages postés
5374
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
873
Ok,
C'est bien que tu ai compris le principe de ce que j'ai fait.
Bonne chance pour la suite.

@lain