Changer couleur background (débutant)

**WillyPayne** · 23/08/2010, 11h04

Bonjour à tous,

J'aimerais colorer une ligne dans une page JSP+struts par le click et le passage de la souris mais rien ne marche, et ce n'est pas faute de chercher...

Voici le code qui fait appel aux 2 fonctions

Code :

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

1
2
3
4
5
 
<script>
    window.onload = addHoverToDatatableRows();
    window.onload = addOnclickToDatatableRows;
 </script>

Je remarque que pour la fonction addOnclickToDatatableRows, si je mets () après, le message dans la fonction ne s'affiche pas ; alors que dans addHoverToDatatableRows, c'est le contraire. Auriez-vous la réponse à cela ?

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
 
function addOnclickToDatatableRows() {
 
   	var trs = document.getElementById('bic').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
 
    	for (var i = 0; i < trs.length; i++) {					
        	trs[i].onclick = new Function("highlightAndSelectRow(this)");
 
   	}
}
 
function highlightAndSelectRow(tr) {
 
 
 
    	var trs = document.getElementById('bic').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
 
	for (var i = 0; i < trs.length; i++) {
 
    	    if (trs[i] == tr) {
 
    	    	alert('ICI LA LIGNE '+i);
 
            	trs[i].bgColor = '#ff0000';
            }	
 
    	}
}
 
function addHoverToDatatableRows() {
    	var trs = document.getElementById('bic').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
 
    	for (var i = 0; i < trs.length; i++) {		
 
        	trs[i].onmouseover = new Function("this.style.backgroundColor='#FF0000'");
        	trs[i].onmouseout = new Function("this.style.backgroundColor='#FFFFFF'");
 
    	}
}

Le message ICI LA LIGNE i s'affiche bien mais la couleur ne change pas.

Et le tableau des éléments :

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
 
<table class="RnoTableData" style="width:2000px;" cellpadding="0" cellspacing="0">
 
	 <logic:present name="bicForm" property="bic">	 
	    <logic:iterate name="bicForm" property="bic" id="bicc" indexId="cindex">
	    <!-- alternance couleurs lignes -->
 
	       <bean:define id="rowid1" type="java.lang.String" value="<%=(new Integer(cindex.intValue())).toString()%>"/>               
 
               <bean:define id="rowc1" type="java.lang.String" value="<%=(new Integer(cindex.intValue()%2)).toString()%>"/>
 
	       <logic:equal name="rowc1" value="0">
	          <bean:define id="rowcColor1" type="java.lang.String" value="oddrow"/>
	       </logic:equal>
	       <logic:notEqual name="rowc1" value="0">
	          <bean:define id="rowcColor1" type="java.lang.String" value="pairrow"/>
	       </logic:notEqual>
	   <!-- données --> 
       <tr>       
 
          <TD class="<bean:write name="rowcColor1"/>" style="width:200px; border-right: 1px; text-align: left;">
             <bean:write name="bicc" property="institutionName"/>
          </TD>
 
          <TD class="<bean:write name="rowcColor1"/>" style="width:150px; border-right: 1px; text-align: left;">       
             <bean:write name="bicc" property="physicalAddress"/>          
          </TD>
 
          <TD class="<bean:write name="rowcColor1"/>" style="width:150px; border-right: 1px; text-align: left;">
             <bean:write name="bicc" property="zipCode"/>
          </TD>
 
          <TD class="<bean:write name="rowcColor1"/>" style="width:150px; border-right: 1px; text-align: left;">
             <bean:write name="bicc" property="location"/>
          </TD>             
       </tr>
 
      </logic:iterate>
   </logic:present>
</table>

Merci pour votre aide !

**Bovino** · 23/08/2010, 11h16

Code :

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

window.onload = addHoverToDatatableRows;

**WillyPayne** · 23/08/2010, 11h24

Merci Bovino pour la réponse, mais j'ai déjà essayé ce que vous proposez mais rien a changé.

**Bovino** · 23/08/2010, 12h00

Tu pourrais montrer le code HTML généré ?

**WillyPayne** · 23/08/2010, 13h10

J'ai oublié de mettre dans le 1er poste <td><div></div></td> autour du <tr></tr>
Voici le HTML généré :

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
 
<td>
   <div class="ascenseurbic" id="bic" style="width:1037px;"  onscroll="javascript:scroll();">
 
       <table class="RnoTableData" style="width:2000px;" cellpadding="0" cellspacing="0">
	  <!-- alternance couleurs lignes -->
 
	  <!-- données -->
          <tr>          
          <TD class="oddrow" style="width:200px; border-right: 1px; text-align: left;">
         EFG-HERMES FR
          </TD>
          <TD class="oddrow" style="width:150px; border-right: 1px; text-align: left;">
         EFGHAEAD
          </TD>
          <TD class="oddrow" style="width:150px; border-right: 1px; text-align: left;">
          XXX
          </TD>
          <TD class="oddrow" style="width:150px; border-right: 1px; text-align: left;">   
          </TD>
          <TD class="oddrow" style="width:150px; border-right: 1px; text-align: left;">       
          THE GATE: DIFC          
          </TD>
          <TD class="oddrow" style="width:150px; border-right: 1px; text-align: left;">      
          </TD>
          <TD class="oddrow" style="width:150px; border-right: 1px; text-align: left;">
         DUBAI
          </TD>
          <TD class="oddrow" style="width:150px; border-right: 1px; text-align: left;">
         UNITED ARAB EMIRATES
          </TD>
          <TD class="oddrow" style="width:150px; border-right: 1px; text-align: center;">
         AE
          </TD>            
       </tr>
 
      <!-- alternance couleurs lignes -->
 
	   <!-- données -->
       <tr>       
 
        <TD class="pairrow" style="width:200px; border-right: 1px; text-align: left;">
         ENK LIMITED
        </TD>
 
        <TD class="pairrow" style="width:150px; border-right: 1px; text-align: left;">
          10 Avenue GDG
        </TD>
        <TD class="pairrow" style="width:150px; border-right: 1px; text-align: left;">
 
        </TD>
 
        <TD class="pairrow" style="width:150px; border-right: 1px; text-align: left;">
         PARIS
        </TD>
 
       </table>
   </div>
</td>

**Bovino** · 23/08/2010, 13h30

Pas facile de déterminer où se situe l'erreur, il faudrait donner plus d'explications... Essaye quand même ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var trs = document.getElementById('bic').getElementsByTagName('tr');
 
	for (var i = 0; i < trs.length; i++) {
 
    	    if (trs[i] == tr) {
 
    	    	alert('ICI LA LIGNE '+i);
 
            	trs[i]..style.backgroundColor = '#ff0000';
            }	
 
    	}

**WillyPayne** · 23/08/2010, 13h42

J'essaie

Code :

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

1
2
 
trs[i]..style.backgroundColor = '#ff0000';

C'est l'erreur

Quant à

Code :

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

1
2
 
trs[i].style.backgroundColor = '#ff0000';

Rien, mais la pop-up "ICI LA LIGNE i" s'affiche bien quand je clique sur une ligne.
Je ne sais pas où donner plus d'explications, car tous les éléments sont déjà là. Si tu veux avoir d'autres infos, dis le moi stp. Merci en tout cas !

**Bovino** · 23/08/2010, 13h53

Envoyé par WillyPayne

J'essaie

Code :

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

1
2
 
trs[i]..style.backgroundColor = '#ff0000';

C'est l'erreur

Normal, il y a un point en trop

Code :

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

trs[i].style.backgroundColor = '#ff0000';

**WillyPayne** · 23/08/2010, 14h03

Erf...si tu lis mon poste précédent, j'ai aussi essayé le bon (un point en moins) mais pas de changement de couleur.

**Bovino** · 23/08/2010, 14h11

Il va probablement falloir modifier la couleur de chaque td alors.
Le mieux est d'ajouter un style dans ton CSS, par exemple :

Code css :

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

.actif td{background-color: #FF0000;}

et d'ajouter la classe sur le clic :

Code :

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

1
2
3
4
5
6
7
8
9
if (trs[i] == tr) {
 
    	    	alert('ICI LA LIGNE '+i);
 
            	trs[i].className = 'actif';
            }
else{
            	trs[i].className = '';
}

**WillyPayne** · 23/08/2010, 14h42

Ca roule !

pour le click de souris

Par contre ca ne marche pas pour la passage de la souris

Code :

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

1
2
3
 
.alasouris td
{background-color: #5f9ea0;}

Code :

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

1
2
3
 
trs[i].onmouseover = new Function("this.className='alasouris'");
trs[i].onmouseout = new Function("this.className=''");

Changer couleur background (débutant)

JavaScript

Discussions similaires

Partager

Partager