affichage ligne de tableau

**rdams** · 31/01/2006, 16h33

Bonjour,

est t'il possible d'afficher une ou plusieurs lignes d'un tableau html à l'aide de display (ou autre) en javascript lorsque l'on click sur un lien.

Merci

**SpaceFrog** · 31/01/2006, 16h44

as tu essayé ?

**denisC** · 31/01/2006, 17h20

Envoyé par rdams

est t'il possible d'afficher une ou plusieurs lignes d'un tableau html à l'aide de display (ou autre) en javascript lorsque l'on click sur un lien.

Oui

Envoyé par rdams

Merci

De rien.

**siddh** · 31/01/2006, 17h24

Envoyé par SpaceFrog

as tu essayé ?

non sinon il aurais pas posé la question

(vu que ce sujet tourne au troll j'en profite, en plus c'est denisC qu'a commencé)

**rdams** · 01/02/2006, 09h20

J'ai essayé ceci :

Code :

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

1
2
3
4
5
6
7
8
 
function affichage_ligne_appli(id_ligne){
	if(document.getElementById(id_ligne).style.display=="none"){
		document.getElementById(id_ligne).style.display=="";
	}else{
		document.getElementById(id_ligne).style.display="none";
	}
}

et sur mes <tr> je fais ceci :

Code :

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

1
2
3
4
5
6
7
8
9
 
<tr id="t1"><td><a onClick="affichage_ligne_appli ('ligne_1')"> affiche_1</a></td></tr>
<tr id='ligne_1><td>test1</td></tr>
<tr id='ligne_1><td>test2</td></tr>
<tr id="t2"><td><a onClick="affichage_ligne_appli ('ligne_2')"> affiche_2</a></td></tr>
<tr id='ligne_2><td>test3</td></tr>
<tr id='ligne_2><td>test4</td></tr>
<tr id="t3"><td><a onClick="affichage_ligne_appli ('ligne_3')"> affiche_3</a></td></tr>
<tr id='ligne_3><td>test5</td></tr>

ca me cache une ligne lorsque je click sur le lien mais pas toute celle qui on le meme id, je voudrais aussi que les ligne soit caché au départ.

PS : si je demande de l'aide c'est que je me suis renseigné avant, ce n'est pas parce qu'il n'y a pas de code source que je n'ai pas essayé.

**denisC** · 01/02/2006, 09h31

Envoyé par rdams

PS : si je demande de l'aide c'est que je me suis renseigné avant, ce n'est pas parce qu'il n'y a pas de code source que je n'ai pas essayé.

On s"en doute, mais tant que tu ne précises pas ce que tu as déjà cherché, on ne peux rien savoir sur ton niveau....

Sinon, pour ton code:
id doit être un identifiant unique d'un élement HTML. Tu ne dois pas avoir deux élements avec le même identifiant. Donc ça ne marche pas....

Mets leur un id avec un compteur, style ligne1_1, ligne1_2, etc...

Ensuite fais une boucle de getElementById...

**siddh** · 01/02/2006, 09h32

deja, on ne met le meme id a differents elements ....

tu peux utiliser ca :
http://javascript.developpez.com/sou...divers#chngcss

tu met la meme class de style a tes elements et tu fais des

Code :

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

1
2
 
changeRule(".taclasse","display:none");

Code :

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

1
2
 
changeRule(".taclasse","");

**siddh** · 01/02/2006, 09h42

un exemple :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<html>
	<head>
		<title> mon titre </title>
		<style type='text/css'>
			.ligne_1{}
			.ligne_2{}
			.ligne_3{}
		</style>
		<script type='text/javascript'>
			function getRuleIndex(name){
			  var cmpt = 0;
			  var index = 0;
			  var tab = null;
			  var good = false;
 
			  while(index<document.styleSheets.length && !good){
				 tab = document.all ? document.styleSheets[index].rules : document.styleSheets[index].cssRules;
 
				 while(cmpt<tab.length && !good){
					if(tab[cmpt].selectorText.toLowerCase() == name)
					   good = true;
					cmpt++;
				 }
 
				 index++;
			  }
 
			  return {sheetIndex:index-1,ruleIndex:cmpt-1};
		   }
 
		   function changeRule(selector,cssText){
			  infos = getRuleIndex(selector);
			  sheet = document.styleSheets[infos.sheetIndex];
			  if(document.all){
				 sheet.removeRule(infos.ruleIndex);
				 sheet.addRule(selector,cssText);         
			  }
			  else{
				 sheet.deleteRule(infos.ruleIndex);
				 sheet.insertRule(selector+"{"+cssText+"}", sheet.cssRules.length);
			  }
		   }
 
 
			var lignes = new Array();
			lignes["ligne_1"] = true;
			lignes["ligne_2"] = true;
			lignes["ligne_3"] = true;
			function affichage_ligne_appli(lig){
				if(lignes[lig])
					changeRule("."+lig,"display:none");
				else
					changeRule("."+lig,"display: inherit;");
				lignes[lig] = !lignes[lig];
			}
 
		</script>
	</head>
	<body>
	<table>
		<tr id="t1"><td><a onClick="affichage_ligne_appli ('ligne_1')"> affiche_1</a></td></tr>
		<tr class='ligne_1'><td>test1</td></tr>
		<tr class='ligne_1'><td>test2</td></tr>
		<tr id="t2"><td><a onClick="affichage_ligne_appli ('ligne_2')"> affiche_2</a></td></tr>
		<tr class='ligne_2'><td>test3</td></tr>
		<tr class='ligne_2'><td>test4</td></tr>
		<tr id="t3"><td><a onClick="affichage_ligne_appli ('ligne_3')"> affiche_3</a></td></tr>
		<tr class='ligne_3'><td>test5</td></tr> 
	</table>
	</body>
</html>

**Cpas2latarte** · 01/02/2006, 09h42

il me samblait qu'en principe, un display ne doit prendre que les valeurs
- block
- none
- inline
- inline-block
- list-item
- table-header-group
- table-footer-group

pas de chaine vide !

Me trompe-je ?

**siddh** · 01/02/2006, 09h45

non tu te trompes pas, tu as juste oublié le inherit qu on peut mettre partout

**rdams** · 01/02/2006, 10h01

mon tableau est dynamique, donc il n'y a pas que 3 lignes.
je ne peu pas initialiser les style et le tableau en JS de facon statique.

je cherche comment compter le nombre d'element avec un id commençant par ligne1_...

**SpaceFrog** · 01/02/2006, 10h03

avec une boucle ?

**rdams** · 01/02/2006, 10h43

au depart je cache mes lignes, mais je n'arrive pas à les afficher voici le code :
la fonction

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function affichage_ligne_appli(id_ligne, nb){
	var id='';
	for(var i=0; i<nb; i++){
	id=id_ligne+'_'+i;
		if(document.getElementById(id).style.display=="none"){
			document.getElementById(id).style.display=="block";
		}else{
			document.getElementById(id).style.display="none";
		}
	}
}

le html

Code :

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

1
2
3
4
5
6
7
8
9
 
<tr id="t1"><td><a onClick="affichage_ligne_appli ('ligne_1')"> affiche_1</a></td></tr> 
<tr id='ligne_1' style="display:none"><td>test1</td></tr> 
<tr id='ligne_1' style="display:none"><td>test2</td></tr> 
<tr id="t2"><td><a onClick="affichage_ligne_appli ('ligne_2')"> affiche_2</a></td></tr> 
<tr id='ligne_2' style="display:none"><td>test3</td></tr> 
<tr id='ligne_2' style="display:none"><td>test4</td></tr> 
<tr id="t3"><td><a onClick="affichage_ligne_appli ('ligne_3')"> affiche_3</a></td></tr> 
<tr id='ligne_3' style="display:none"><td>test5</td></tr>

si je ne les cache pas (j'enleve le style="display:none"), j'arrive à les cacher mais plus à les rafficher.