Comment attraper tous les noeud d'un même type dans un tableau

Version imprimable

Bonsoir,

J'ai un script pour cocher ou décocher des checkbox

Mais j'ai l'impression qu'il n'est pas content du contexte dans lequel je l'utilise, c'est à dire un tableau.

Voici mon javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function GereChkbox(conteneur, a_faire) {
var blnEtat=null;
var Chckbox = document.getElementById(conteneur).firstChild;
	while (Chckbox!=null) 
	{
		alert(Chckbox.nodeName);
		if (Chckbox.nodeName=="INPUT")
			if (Chckbox.getAttribute("type")=="checkbox") 
			{
				blnEtat = (a_faire=='0') ? 
				false : (a_faire=='1') ? 
				true : (document.getElementById(Chckbox.getAttribute("id")).checked) ? 
					false : true;			document.getElementById(Chckbox.getAttribute("id")).checked=blnEtat;
			}
		Chckbox = Chckbox.nextSibling;
	}
}

Mon html correspondant :

Code:

1
2
3
4
5
<tbody  id="tableau">
<tr>
<td>
<input type="checkbox" name="checkbox[{$numero}]" id="checkbox[{$numero}]" value="{$majeur.id_maj}"><label for="checkbox[{$numero}]" title="Sélection unitaire pour l'archivage"/>	   		</td>
</tr>

Dans le javascript, j'ai placé un 'alert' pour connaitre la valeur de ce qu'il découvre et en fait il ne voit que "TR"

En résumé,
J'ai dans mon html

Code:

1
2
3
4
5
<tbody id="ici">
<tr><td><input type="checkbox" .....</td</tr>
<tr><td><input type="checkbox" .....</td</tr>
<tr><td><input type="checkbox" .....</td</tr>
</tbody>

Comment atteindre le noeud <td> ?

Merci d'avance

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
<tbody>
<tr>
	<td><input type='text' value="coucou" id='me' /></td>
</tr>
 
</tbody>
 
<script type='text/javascript'>
var contenu=document.getElementsByTagName('table')[0].getElementsByTagName('td')[0].getElementsByTagName('*')
var result=""
for (i=0;i<contenu.length;i++){
  result+=contenu[i].tagName +" " +contenu[i].id}
  alert( result)
</script>

Sinon faut faire très attention a garder sa braguette fermée pour ne pas attrapper son noeud dans un tableau ...

Merci beaucoup

Dans mon contexte :

HTML

Code:

1
2
3
4
5
6
<table>
<tr><td>code</td><td>libelle</td></tr>
<tr><td><input type="checkbox" ....></td><td>Rouge</td></tr>
<tr><td><input type="checkbox" ....></td><td>Jaune</td></tr>
<tr><td><input type="checkbox" ....></td><td>Vert</td></tr>
</table>

En faisant :

Code:

var Chckbox = document.getElementById(conteneur).getElementsByTagName('tr')[0].getElementsByTagName('td');

Je n'arrive à avoir que ma 1ère ligne de <td> soit mes titres.

Or dans mon cas ce que je veux récupérer ce sont les lignes de type "checkbox"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// a_faire = '0' pour tout décocher
// a_faire = '1' pour tout cocher
// a_faire = '2' pour inverser la sélection
function GereChkbox(conteneur, a_faire) {
var blnEtat=null;
var Chckbox = document.getElementById(conteneur).getElementsByTagName('tr')[0].getElementsByTagName('td');
	while (Chckbox!=null) 
	{	
		if (Chckbox.nodeName=="input")
			if (Chckbox.getAttribute("type")=="checkbox") 
			{
				blnEtat = (a_faire=='0') ? 
				false : (a_faire=='1') ? 
				true : (document.getElementById(Chckbox.getAttribute("id")).checked) ? 
					false : true;
				document.getElementById(Chckbox.getAttribute("id")).checked=blnEtat;
			}
		Chckbox = Chckbox.nextSibling;
	}
}

En plaçant ce code :

Code:

1
2
3
4
5
6
 var contenu=document.getElementById(conteneur).getElementsByTagName('tr')[0].getElementsByTagName('td');
 alert(contenu);
var result=""
for (i=0;i<contenu.length;i++){
  result+=contenu[i].tagName +" " +contenu[i].id}
  alert( result)

Dans le résultat de l'alert je n'ai que des TD

29/03/2007, 10h57
SpaceFrog
ben normal tu ne demande que les td ...
Code:

1 2 var Chckbox = document.getElementById(conteneur).getElementsByTagName('tr')[0].getElementsByTagName('td');
demendes toues les nodes dasn les td:

Code:

var Chckbox = document.getElementById(conteneur).getElementsByTagName('tr')[0].getElementsByTagName('td');.getElementsByTagName('*')
29/03/2007, 11h12
lodan

Citation:

Envoyé par SpaceFrog

demendes toues les nodes dasn les td:

Code:

var Chckbox = document.getElementById(conteneur).getElementsByTagName('tr')[0].getElementsByTagName('td');.getElementsByTagName('*')

avec cette syntaxe dans Chckbox je récupère le contenu de conteneur.
29/03/2007, 11h21
SpaceFrog

oups oublié un [0]

Code:

var Chckbox = document.getElementById(conteneur).getElementsByTagName('tr')[0].getElementsByTagName('td')[0].getElementsByTagName('*')

avec cette syntaxe tu récupères tous les elements du premier td du premier tr
29/03/2007, 11h26
lodan

Citation:

Envoyé par SpaceFrog

avec cette syntaxe tu récupères tous les elements du premier td du premier tr

Dans mon cas ce sont tous les td ayant un input de type checkbox que je veux récupérer.
29/03/2007, 14h00
lodan

Ne devrais-je pas faire d'abord une lecture des TR

Code:

document.getElementById(conteneur).getElementsByTagName('tr')[0];

Puis pour chaque TR trouvé, lire les TD et pour chaque TD trouvé lire les INPUT.

Je ne saurai pas le faire, mais c'est juste une idée
29/03/2007, 14h09
Djakisback

Salut,
pour info quand tu fais : Chckbox = Chckbox.nextSibling; tu récupère le noeud frère et pas le noeud fils (t'as donc que les TR vu que tu restes au même niveau dans l'arbre).
Bye

éviter autant que possible les nextSibling car l'interpretation des noeud diffère selon les browser, tu riques de taper dans un noeud texte ...

et pourquoi pas directement les inputs ?
Code:

1 2 3 4 5 6 7 <script type='text/javascript'> var contenu=document.getElementsByTagName('table')[0].getElementsByTagName('input') var result="" for (i=0;i<contenu.length;i++){ result+=contenu[i].tagName +" " +contenu[i].id} alert( result) </script>

Citation:

Envoyé par SpaceFrog

Code:

1
2
3
4
5
6
7
<script type='text/javascript'>
var contenu=document.getElementsByTagName('table')[0].getElementsByTagName('input')
var result=""
for (i=0;i<contenu.length;i++){
  result+=contenu[i].tagName +" " +contenu[i].id}
  alert( result)
</script>

contenu.length est à 0
J'ai un result vide avec cela.

Pour "tout cocher", "tout décocher" ou "Inverser la Sélection" vos checkbox dans un tableau html

Tout d'abord créez votre tableau HTML

Code:

1
2
3
4
5
6
<table id_tableau>
<tr><td>code</td><td>libelle</td></tr>
<tr><td><input type="checkbox" ....></td><td>Rouge</td></tr>
<tr><td><input type="checkbox" ....></td><td>Jaune</td></tr>
<tr><td><input type="checkbox" ....></td><td>Vert</td></tr>
</table>

Puis ajouter vos boutons pour déclencher le traitement voulu

Code:

1
2
3
<input type="button" value="Tout cocher" onClick="GereChkbox('tableau','1');" class="button">
<input type="button" value="Tout décocher" onClick="GereChkbox('tableau','0');" class="button">
<input type="button" value="Inverser la sélection" onClick="GereChkbox('tableau','2');" class="button">

Enfin faites votre javascript comme ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// a_faire = '0' pour tout décocher
// a_faire = '1' pour tout cocher
// a_faire = '2' pour inverser la sélection
function GereChkbox(conteneur, a_faire) 
{
	var blnEtat=null;
	var Chckbox = document.getElementById(conteneur).getElementsByTagName('input');
	for (i in Chckbox)
	{
		if (Chckbox[i].nodeName=="INPUT")
		if (Chckbox[i].getAttribute("type")=="checkbox") {
			blnEtat = (a_faire=='0') ? false : (a_faire=='1') ? true : (document.getElementById(Chckbox[i].getAttribute("id")).checked) ? false : true;
			document.getElementById(Chckbox[i].getAttribute("id")).checked=blnEtat;
		}
	}
}

Voila c'est prêt.

Merci à tous les contributeurs

30/03/2007, 20h40
SpaceFrog

Ou si vous êtes un peu plus pressés jetez un oeil dans la faq :aie:
01/04/2007, 16h36
lodan

Oui par ici