Changer de couleur un tr en survol

**bubulemaster** · 12/02/2008, 17h05

Bonjour,

je souhaite sous IE changer une classe de style tr en survol.
J'ai donc écrit le code suivant :

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
		<script type='text/javascript'>
        function SetRowOver()
		{       
            var rows = document.getElementsByTagName('tr') ;
 
            for (var i = 0; i < rows.length; i++)
			{
                if ((navigator.appName == 'Microsoft Internet Explorer') && (rows[i].className=='file_explorer_tr'))
				{
                    rows[i].onmouseover = function() {
                                                      this.className += '_hover';
//this.style.color = 'red' ;
                                                     } ;
                    rows[i].onmouseout = function() {
                                                     this.className = this.className.replace( '_hover', '' );
                                                    } ;
                }		
            }
        }
 
        SetRowOver() ;	
	</script>

Le style ne change pas ?!? Pourtant si je décommente la ligne this.style.color = 'red' ; le texte passe en rouge.

voici ma feuille de style :

Code :

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

1
2
3
4
5
6
7
.file_explorer_tr_hover {
	border: 1px dashed Red;
}
 
.file_explorer_tr {
	border: 0px;
}

Je ne comprend pas. quelqu'un aurait-il une idée ?

**le_chomeur** · 12/02/2008, 17h22

Va faire un pti tour dans la fac

http://javascript.developpez.com/faq...ent#rollOverTr

**SpaceFrog** · 12/02/2008, 17h25

dans la FAQ ce n'est pas attribué dynamiquement ...
N'ayant pas vu d'erreur directe dans ton code j'ai tout recodé ...

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
 
 
<style type='text/css'>
.Alltd {border: 2px solid green;}
.over {background-color:red;}
.out  {background-color:transparent;}
</style>
 
<script type='text/javascript'>
function populate(){
var Trs=document.getElementsByTagName('tr');
for (i=0;i<Trs.length;i++){
Trs[i].onmouseover=function(){this.className=this.className+" over";}
Trs[i].onmouseout=function(){this.className=this.className.replace(" over","");}
}
 
}
 
</script>
</head>
 
<body onload="populate()">
<table border="1" width="100%">
  <tr>
    <td class="Alltd" width="20%">cc&nbsp;</td>
    <td  class="Alltd"  width="20%">&nbsp;</td>
    <td class="Alltd"  width="20%">&nbsp;</td>
    <td  class="Alltd" width="20%">&nbsp;</td>
    <td  class="Alltd" width="20%">&nbsp;</td>
  </tr>
  <tr>
    <td  class="Alltd" width="20%">&nbsp;</td>
    <td class="Alltd"  width="20%">&nbsp;</td>
    <td class="Alltd"  width="20%">&nbsp;</td>
    <td class="Alltd"  width="20%">&nbsp;</td>
    <td  class="Alltd" width="20%">&nbsp;</td>
  </tr>
  <tr>
    <td  class="Alltd" width="20%">&nbsp;</td>
    <td  class="Alltd" width="20%">&nbsp;</td>
    <td  class="Alltd" width="20%">&nbsp;</td>
    <td  class="Alltd" width="20%">&nbsp;</td>
    <td  class="Alltd" width="20%">&nbsp;</td>
  </tr>
</table>