Afficher/masquer une partie d'un tr au survol de la souris

Version imprimable

Bonjour !

IE n'acceptant pas les td:hover en css, je cherche un moyen d'obtenir l'effet suivant en javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
<style>
 
table{width:100%;}
 
table tr:hover {background:#888;}
 
td span {display: none;}
 
td:hover span {display : inline;}
</style>
<table>
	<tr><td><a href="#">keup1 1</a> <span><a href="#">M</a> Fr F <a href="#">x</a></span> </td> </tr>
	<tr><td><a href="#">keup1 2</a> <span><a href="#">M</a> Fr F <a href="#">x</a></span></td> </tr>
	<tr><td><a href="#">keup1 3</a> <span><a href="#">M</a> Fr F <a href="#">x</a></span></td> </tr>
</table>

Le mieux que j'arrive a faire, c'est de faire disparaitre la ligne complete avec le code suivant:

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
 
<style>
table{width:100%;text-align:center}
.cache{display: none ;}
.surligne{background:#888;}
</style>
 
 
<script type="text/javascript">
 
function changeCouleurTr()
 
{
	var ligne=document.getElementsByTagName('tr');
	for(var j=0;j<ligne.length;j++)
	{
		ligne[j].onmouseover=function(){
			this.className='surligne';
		};
		ligne[j].onmouseout=function(){
			this.className='cache';
		};
	}
}
document.onmousemove=changeCouleurTr;
 
</script>
<table>
	<tr><td><a href="#">blog 1</a></td> <td><a href="#">M</a></td> <td>Fr</td> <td><a href="#">F</a></td> <td><a href="#">x</a></td> </tr>
	<tr><td><a href="#">blog 2</a></td> <td><a href="#">M</a></td> <td>Fr</td> <td><a href="#">F</a></td> <td><a href="#">x</a></td> </tr>
</table>

Quelqu'un aurait une solution ? Merci !

14/03/2008, 09h21
E.Bzz

Bonjour,
tu ne pourras pas simplement mettre un display:none sur un <td> car cela impacte la structure de la table qui deviendrait incohérente ...
En masquer le contenu (à mettre dans un span que tu passeras en visibility:hidden) ne suffirait pas ?

A+
14/03/2008, 09h51
Kefass
Si effectivement, je sais pas trop dans quoi je voulais partir la !

Cependant il me reste un dernier problème (et c'est la que vous allez voir ma nullité en js :p):

Comment atteindre un span compris dans mon tr?

Mon code se presente maintenant comme ca :
Code:

1 2 3 <tr><td><a href="#">test 1</a> <span>FOO</span> </td></tr>
J'ai pensé a un ' this.span.class="cache" ' mais cela n'a pas l'air de marcher.
14/03/2008, 10h00
E.Bzz

Citation:

Envoyé par Kefass

Comment atteindre un span compris dans mon tr?

Si tu veux faire ça par un onclick sur le td :

Code:

onclick="this.getElementsByTagName('span')[0].className='cache';"

A+

Merci beaucoup pour ton aide, cela marche parfaitement !

Voici le code si ca peut aider quelqu'un ...

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
 
 
<style>
table{width:100%;text-align:center}
.surligne{background:#888;}
.hidden{visibility:hidden}
.visible{visibility:visible}
</style>
<script type="text/javascript">
function afficherOption()
{
	var ligne=document.getElementsByTagName('tr');
	for(var j=0;j<ligne.length;j++)
 
	{
		ligne[j].onmouseover=function(){
			this.className='surligne';
			this.getElementsByTagName('span')[0].className='visible';
		};
		ligne[j].onmouseout=function(){
			this.className='defaut';
			this.getElementsByTagName('span')[0].className='hidden';
		};
	}
}
document.onmousemove=afficherOption;
</script>
 
	<h3>Amis</h3>
		<table>
			<tr><td><a href="#">amis 1</a> <span class="hidden"><a href="#">M</a> Fr <a href="#">F</a> <a href="#">x</a></span> </td></tr>
			<tr><td><a href="#">amis 2</a> <span class="hidden"><a href="#">M</a> Fr <a href="#">F</a> <a href="#">x</a></span> </td></tr>
			<tr><td><a href="#">amis 3</a> <span class="hidden"><a href="#">M</a> Fr <a href="#">F</a> <a href="#">x</a></span> </td></tr>
	</table>