Exploiter le DOM en JavaScript
Résolu
Mallik-Macif
Messages postés
4
Statut
Membre
-
Alain_42 Messages postés 5413 Statut Membre -
Alain_42 Messages postés 5413 Statut Membre -
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 :
Un tr du code HTML
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.
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.
A voir également:
- Exploiter le DOM en JavaScript
- Telecharger javascript - Télécharger - Langages
- Javascript echo ✓ - Forum PHP
- A javascript error occurred in the main process - Forum Windows
- Afficher un tableau javascript en html ✓ - Forum Javascript
- A javaScript error occurred in the main process - Forum Handicap / Accessibilté
6 réponses
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>
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 :
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 =)
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 =)
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[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"));
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 !
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 !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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)
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>
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 :)
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 :)