[Struts] Changer bgcolor avec un onclick()

**R1pToR** · 18/07/2007, 14h34

Bonjour,

En fait j'ai un tableau avec plusieurs cases, et j'aimerai que dès que l'on clique sur une case, les autre cases de la lignes changent de background (pour faire un effet graphique de sélection).

Voici le code de ma JSP :

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
<table class="tableau_affichage">
 
 
              <tr>
                 <th width="8"></th>
                 <th>N°</th>
                 <th>Livraison</th>
                 <th width="210">Emetteur</th>
                 <th>Version</th>
                 <th>1</th>
                 <th>2</th>
                 <th>3</th>
                 <th>4</th>
              </tr>
 
             <tbody>
 
 
  <logic:notEmpty name="tableauDemandesIntegration" property="livListCollection">
  <logic:iterate id="demandesIntegration" name="tableauDemandesIntegration" property="livListCollection" >
  <logic:present name="demandesIntegration" >
 
              <tr>
                 <td><html:img alt="Voir" src="/LivApp/Images/mutmut.jpg" width="30" onclick="javascript:selected();"/></td>
                 <td id="num"><bean:write name="demandesIntegration" property="numero" /></td>
                 <td id="dateLiv"><bean:write name="demandesIntegration" property="dateLivraison" format="dd-MM-yyyy" /></td>
                 <td id="nomEm"><bean:write name="demandesIntegration" property="nomEmetteur" /></td>
                 <td id="versEnv"><bean:write name="demandesIntegration" property="versionEnvironnement" /></td>
                 <td id="carre1">&nbsp;</td>
                 <td id="carre2">&nbsp;</td>
                 <td id="carre3">&nbsp;</td>
                 <td id="carre4">&nbsp;</td>
             </tr>
 
  </logic:present>
  </logic:iterate>
  </logic:notEmpty>
             </tbody>
             </table>

Et le javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="JavaScript">
 
function selected(){
 
document.getElementById('num').bgcolor = '#FFC891';
document.getElementById('dateLiv').bgcolor = '#FFC891';
document.getElementById('nomEm').bgcolor = '#FFC891';
document.getElementById('versEnv').bgcolor = '#FFC891';
 
}
 
 
</script>

Lorsque je clique sur l'img j'ai une erreur dans mon Javascript et je ne vois pas comment la corriger.

Merci de votre aide

**Malarkey** · 18/07/2007, 14h42

Merci de fair eune recherche sur le forum avant d'ouvrir un topic...

http://www.developpez.net/forums/sho...d.php?t=378596

**R1pToR** · 18/07/2007, 15h37

Désolé, c'est le boss qui m'a mis la pression donc j'ai pas eu vraiment le temps de rechercher ... promis je le ferai plus

Grace au topic que tu m'a filé, j'ai pu avoir ce que je voulais, c'est-à-dire une ligne qui change de couleur lorsque l'on clique dessus.

Maintenant, il me reste un détail à régler, j'aimerai juste que ce soit uniquement certaines colonnes de la ligne qui soient coloriées et non toutes ... Si vous pouviez m'aider, voici le code :

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
function colorMe(ligne)
{
 var AllLines=document.getElementsByTagName('tr');
 for (i=0;i<AllLines.length;i++){
 
    AllLines[i].style.backgroundColor=(ligne==AllLines[i])?'#FFC891':'white';
 
}
}
 
         <tbody>
 
 
  <logic:notEmpty name="tableauDemandesIntegration" property="livListCollection">
  <logic:iterate id="demandesIntegration" name="tableauDemandesIntegration" property="livListCollection" >
  <logic:present name="demandesIntegration" >
 
              <tr onclick="javascript:colorMe(this)">
                 <td ><html:img alt="Voir" src="/LivApp/Images/mutmut.jpg" width="30" /></td>
                 <td id="num"><bean:write name="demandesIntegration" property="numero" /></td>
                 <td id="dateLiv"><bean:write name="demandesIntegration" property="dateLivraison" format="dd-MM-yyyy" /></td>
                 <td id="nomEm"><bean:write name="demandesIntegration" property="nomEmetteur" /></td>
                 <td id="versEnv"><bean:write name="demandesIntegration" property="versionEnvironnement" /></td>
                 <td id="carre1">&nbsp;</td>
                 <td id="carre2">&nbsp;</td>
                 <td id="carre3">&nbsp;</td>
                 <td id="carre4">&nbsp;</td>
             </tr>
 
  </logic:present>
  </logic:iterate>
  </logic:notEmpty>
             </tbody>
             </table>

**Malarkey** · 18/07/2007, 15h47

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
function colorMe(ligne)
{
 var AllLines=document.getElementsByTagName('tr');
 var tExcept=new Array(0,1,4,6) // Cellule a ne pas colorée
 for (i=0;i<AllLines.length;i++){
    AllLines[i].style.backgroundColor=(ligne==AllLines[i])?'#FFC891':'white';
    var tds=AllLines[i].getElementsByTagName('td');
    for (var j=0;j<tds.length;j++) {
        tds[j].style.backgroundColor=(in_array(j,tExcept))?'#FFC891':'FFC891';
    }
 }
}
 
function in_array(value,array) {
 var ok=false;
 for (var i=0;i<array.length;i++) {
   if (array[i]==value) {
     ok=true; break;
   }
 }
 return ok;
}

**R1pToR** · 18/07/2007, 15h59

Et dans le paramètre de new Array() je rentre l'ordre dans lequelle la colonne que je ne souhaite pas colorier apparaitra c'est ça ? (pour la 6ème en partant de la gauche, je rentre 5)

**Malarkey** · 18/07/2007, 20h01

Envoyé par R1pToR

Et dans le paramètre de new Array() je rentre l'ordre dans lequelle la colonne que je ne souhaite pas colorier apparaitra c'est ça ? (pour la 6ème en partant de la gauche, je rentre 5)

tu rentres les colonne dans l'ordre que tu le souhaite, en commençant par 0 pour la première

**R1pToR** · 19/07/2007, 10h23

Ok, c'est bien ce que je pensais.

Le problème c'est que lorsque que je clique sur l'image, maintenant, se sont toutes les colonnes de tous les tableaux de la JSP qui se colorent ...

Voici mon javascript :

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
<script language="JavaScript">
 
function colorMe(ligne)
{
 var AllLines=document.getElementsByTagName('tr');
 var tExcept=new Array(0); // Cellule a ne pas colorier
 
 for (i=0;i<AllLines.length;i++){
 
    AllLines[i].style.backgroundColor=(ligne==AllLines[i])?'#FFC891':'white';
    var tds=AllLines[i].getElementsByTagName('td');
    for (var j=0;j<tds.length;j++) {
        tds[j].style.backgroundColor=(in_array(j,tExcept))?'#FFC891':'#FFC891';
    }
}
}
 
function in_array(value,array) {
 var ok=false;
 for (var i=0;i<array.length;i++) {
   if (array[i]==value) {
     ok=true; break;
   }
 }
 return ok;
}
 
</script>

**Matthieu2000** · 19/07/2007, 10h30

Code :

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

var AllLines=ligne.parentNode.getElementsByTagName('tr');

**R1pToR** · 19/07/2007, 10h34

Bien joué !

Sauf que maintenant ... ça ne colore plus rien du tout

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
function colorMe(ligne)
{
 var AllLines=ligne.getElementsByTagName('tr');
 var tExcept=new Array(0,5,6,7); // Cellule a ne pas colorier
 
 for (i=0;i<AllLines.length;i++){
 
    AllLines[i].style.backgroundColor=(ligne==AllLines[i])?'#FFC891':'white';
    var tds=AllLines[i].getElementsByTagName('td');
    for (var j=0;j<tds.length;j++) {
        tds[j].style.backgroundColor=(in_array(j,tExcept))?'#FFC891':'#FFC891';
    }
}
}
 
function in_array(value,array) {
 var ok=false;
 for (var i=0;i<array.length;i++) {
   if (array[i]==value) {
     ok=true; break;
   }
 }
 return ok;
}