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

**lodan** · 28/03/2007, 19h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 29/03/2007, 09h48

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**lodan** · 29/03/2007, 10h49

Merci beaucoup

Dans mon contexte :

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 29/03/2007, 10h57

ben normal tu ne demande que les td ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

demendes toues les nodes dasn les td:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**lodan** · 29/03/2007, 11h12

Envoyé par SpaceFrog

demendes toues les nodes dasn les td:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

avec cette syntaxe dans Chckbox je récupère le contenu de conteneur.

**SpaceFrog** · 29/03/2007, 11h21

oups oublié un [0]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**lodan** · 29/03/2007, 11h26

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.

**lodan** · 29/03/2007, 14h00

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Djakisback** · 29/03/2007, 14h09

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

**SpaceFrog** · 29/03/2007, 14h25

é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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**lodan** · 29/03/2007, 19h35

Envoyé par SpaceFrog

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**lodan** · 29/03/2007, 21h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
		}
	}
}