[Struts] Changer bgcolor avec un onclick()

Version imprimable

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:

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:

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 ;)

18/07/2007, 14h42
Malarkey

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

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

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 :lol:

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:

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>

Code:

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

18/07/2007, 15h59
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)
18/07/2007, 20h01
Malarkey

Citation:

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

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:

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>

19/07/2007, 10h30
Matthieu2000

Code:

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

:idea:

Bien joué ! :D

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

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

19/07/2007, 10h42
Matthieu2000

où est

Code:

parentNode

?
19/07/2007, 11h09
R1pToR

Heuuuu ... nul part ! :lol:

Comme ça fonctionnait sans, et que je ne savais pas trop comment m'en servir, je ne l'ai pas rajouté ...
19/07/2007, 14h18
Matthieu2000

fais une recherche / teste / cherche dans le dictionnaire parent et node