Sujet Précédent Sujet Suivant

Exploiter le DOM en JavaScript

Résolu/Fermé
Mallik-Macif Messages postés 4 Date d'inscription lundi 11 mars 2013 Statut Membre Dernière intervention 13 mars 2013 - 11 mars 2013 à 15:29
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 13 mars 2013 à 10:41
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

Réponse 1 / 6
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
11 mars 2013 à 21:08
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>
0
Réponse 2 / 6
Mallik-Macif Messages postés 4 Date d'inscription lundi 11 mars 2013 Statut Membre Dernière intervention 13 mars 2013
12 mars 2013 à 09:55
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 =)
0
Réponse 3 / 6
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
12 mars 2013 à 10:33
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"));
0
Réponse 4 / 6
Mallik-Macif Messages postés 4 Date d'inscription lundi 11 mars 2013 Statut Membre Dernière intervention 13 mars 2013
12 mars 2013 à 10:46
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 !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
12 mars 2013 à 17:34
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>
0
Réponse 6 / 6
Mallik-Macif Messages postés 4 Date d'inscription lundi 11 mars 2013 Statut Membre Dernière intervention 13 mars 2013
13 mars 2013 à 09:24
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 :)
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
13 mars 2013 à 10:41
Ok,
C'est bien que tu ai compris le principe de ce que j'ai fait.
Bonne chance pour la suite.

@lain
0

Discussions similaires

Avis site Crush dom tom / crushdomtom.com
Juanmarco33@ -
Afrikarnak -

11 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Ajouter ma photo de profil à mon compte crushdomtom
Aldu13 -
MPMP10 -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses