Discussion :

[WillyPayne]

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]

Code :

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

window.onload = addHoverToDatatableRows;

[WillyPayne]

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

[Bovino]

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

[WillyPayne]

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]

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';
            }	
 
    	}