affichage ligne de tableau

Version imprimable

31/01/2006, 16h33
rdams

affichage ligne de tableau

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
31/01/2006, 16h44
SpaceFrog

as tu essayé ?
31/01/2006, 17h20
denisC

Re: affichage ligne de tableau

Citation:

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

Citation:

Envoyé par rdams

Merci

De rien.
31/01/2006, 17h24
siddh

Citation:

Envoyé par SpaceFrog

as tu essayé ?

non sinon il aurais pas posé la question :D

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

J'ai essayé ceci :
Code:

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:

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

01/02/2006, 09h31
denisC

Citation:

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...
01/02/2006, 09h32
siddh
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:

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

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

un exemple :

Code:

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>

01/02/2006, 09h42
Cpas2latarte

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 ?
01/02/2006, 09h45
siddh

non tu te trompes pas, tu as juste oublié le inherit qu on peut mettre partout
01/02/2006, 10h01
rdams

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_...
01/02/2006, 10h03
SpaceFrog

avec une boucle ? :roll:

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

Code:

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:

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.

01/02/2006, 10h47
siddh

tu as mis un == pour block ... met un simple =
01/02/2006, 10h49
rdams

merci ça marche
erreur de copier coller