changer la couleur d'une cellule après clic sur case à cocher

**zozoman** · 03/07/2013, 14h33

Bonjour à tous,

Je voudrais changer la couleur d'une cellule après cochage au sommet de la colonne.

J'ai déclaré plusieurs tableaux 2 dimensions : un pour la couleur de la cellule et un pour la valeur de la cellule

J'ai déclaré un tableau 1 dimension pour la valeur de la case à cocher de la colonne (bien que ce ne soit pas nécessaire)

Firebug me dit que ma variable analyse[s] n'est pas définie, pourtant, je l'ai affichée précédemment.

Code JavaScript :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
function griseChamp(s)
{
    var i,j;
    var nbLignes1,nbLignes2,nbLignes3,nbLignes4,nbLignes5;
    var nbCols1,nbCols2,nbCols3,nbCols4,nbCols5;
    var couleurFond=document.getElementsByTagName("thead")[0].getAttribute("bgcolor");
if(document.getElementById("tbFAJ1")===null)
    {
        nbLignes1=0;
    }
    else
    {
        nbLignes1=document.getElementById("tbFAJ1").getElementsByTagName("tr").length;
    }
 
// Déclaration du tableau 1 dimension analyse[i]
    var analyse=new Array();
    analyse = document.getElementById("analyse["+s+"]").checked;
    alert(analyse[s]); // Affiche false
 
    // Déclaration du tableau à 2 dimensions mesure[j][i]
    var couleur=new Array();
    var casacocher=new Array();
    for(j=0;j<nbLignes1;j++)
    {    
        couleur[j]=new Array();
        casacocher[j]=new Array();
 
        couleur[j][s]=document.getElementById("mesure["+j+"]["+s+"]").getAttribute("bgColor");
        casacocher[j][s]=document.getElementById("mesure["+j+"]["+s+"]").textContent;
 
        //alert("couleur["+j+"]["+s+"] : "+couleur[j][s]);
        //alert("casacocher["+j+"]["+s+"] : "+casacocher[j][s]);
    }
 
    // Modification dynamique de la valeur de la case à cocher
    if(analyse[s].checked)
    {
        analyse[s]=document.getElementById("analyse["+s+"]").setAttribute("value","on");
        alert(analyse[s]);
    }
    else
    {
        analyse[s]=document.getElementById("analyse["+s+"]").setAttribute("value","");
        alert(analyse[s]);
    }
 
 
 
 
 
    // Modification dynamique de la couleur de fond de la colonne
    for(j=0;j<nbLignes1;j++)
    {
        // if 1
        if(analyse[s]==="on" && casacocher[j][s]==="on")
        {
            // Couleur de la cellule
            document.getElementById("mesure["+j+"]["+s+"]").setAttribute("bgColor",couleurFond);
            //alert(analyse[s]);
            alert("If 1");
        }
 
        // if 2
        else if(analyse[s]==="on" && casacocher[j][s]==="")
        {
            document.getElementById("mesure["+j+"]["+s+"]").setAttribute("bgColor","#909090");
            alert("If 2");
        }
 
        // if 3
        else if(analyse[s]==="" && casacocher[j][s]===""  || analyse[s]==="" && casacocher[j][s]==="on")
        {
            document.getElementById("mesure["+j+"]["+s+"]").setAttribute("bgColor","#909090");
            alert("If 3");
            //alert(analyse[s]);
        }
 
        // Erreur
        else
        {
            //alert("Erreur !!!");
        }
    }
}

**zozoman** · 03/07/2013, 14h57

j'ai fait un mauvais copier coller.
Voici mon nouveau code corrigé mais les tests ne marchent pas (test colonne cochée et case cochée)

Code JavaScript :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
 
function griseChamp(s)
{
    var j;
    var nbLignes1,nbLignes2,nbLignes3,nbLignes4,nbLignes5;
    var nbCols1,nbCols2,nbCols3,nbCols4,nbCols5;
    var couleurFond=document.getElementsByTagName("thead")[0].getAttribute("bgcolor");
 
    ///////////////////////////////////////////////////////////////////////////////////////////
    ///////////////////// Vérification de la présence du tableau : nb lignes///////////////////
    ///////////////////////////////////////////////////////////////////////////////////////////
    if(document.getElementById("tbFAJ1")===null)
    {
        nbLignes1=0;
    }
    else
    {
        nbLignes1=document.getElementById("tbFAJ1").getElementsByTagName("tr").length;
    }
    //////////////////////////////////////////////////////////////////////////////
    if(document.getElementById("tbFAJ2")===null)
    {
        nbLignes2=0;
    }
    else
    {
        nbLignes2=document.getElementById("tbFAJ2").getElementsByTagName("tr").length; 
    }
    //////////////////////////////////////////////////////////////////////////////
    if(document.getElementById("tbFAJ3")===null)
    {
        nbLignes3=0;
    }
    else
    {
        nbLignes3=document.getElementById("tbFAJ3").getElementsByTagName("tr").length; 
    }
    //////////////////////////////////////////////////////////////////////////////
    if(document.getElementById("tbFAJ4")===null)
    {
        nbLignes4=0;
    }
    else
    {
        nbLignes4=document.getElementById("tbFAJ4").getElementsByTagName("tr").length; 
    }
    //////////////////////////////////////////////////////////////////////////////
    if(document.getElementById("tbFAJ5")===null)
    {
        nbLignes5=0;
    }
    else
    {
        nbLignes5=document.getElementById("tbFAJ5").getElementsByTagName("tr").length;
    }
 
 
    ///////////////////////////////////////////////////////////////////////////////////////////
    ///////////////// Vérification de la présence du tableau : nb colonnes ////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////////
 
    if(document.getElementById("tbFAJ1")===null)
    {
        nbCols1=0;
    }
    else
    {
        nbCols1=document.getElementById("tbFAJ1").getElementsByTagName("tr")[0].getElementsByTagName("td").length;
    }
 
    ////////////////////////////////////////////////////////////////////////////////////////////
    if(document.getElementById("tbFAJ2")===null)
    {
        nbCols2=0;
    }
    else
    {
        nbCols2=document.getElementById("tbFAJ2").getElementsByTagName("tr")[0].getElementsByTagName("td").length;
    }
 
    ////////////////////////////////////////////////////////////////////////////////////////////
    if(document.getElementById("tbFAJ3")===null)
    {
        nbCols3=0;
    }
    else
    {
        nbCols3=document.getElementById("tbFAJ3").getElementsByTagName("tr")[0].getElementsByTagName("td").length;
    }
 
    ////////////////////////////////////////////////////////////////////////////////////////////
    if(document.getElementById("tbFAJ4")===null)
    {
        nbCols4=0;
    }
    else
    {
        nbCols4=document.getElementById("tbFAJ4").getElementsByTagName("tr")[0].getElementsByTagName("td").length;
    }
 
    ////////////////////////////////////////////////////////////////////////////////////////////
    if(document.getElementById("tbFAJ5")===null)
    {
        nbCols5=0;
    }
    else
    {
        nbCols5=document.getElementById("tbFAJ5").getElementsByTagName("tr")[0].getElementsByTagName("td").length;
    }
 
    // Déclaration du tableau 1 dimension analyse[i]
    var analyse=new Array();
    analyse[s]=document.getElementById("analyse["+s+"]");
    alert(analyse[s].value); // Affiche "on" à chaque fois
    alert(analyse[s].checked); // Affiche "true" ou "false"
 
    // Déclaration du tableau à 2 dimensions mesure[j][i]
    var couleur=new Array();
    var casacocher=new Array();
    for(j=0;j<nbLignes1;j++)
    {    
        couleur[j]=new Array();
        casacocher[j]=new Array();
 
        couleur[j][s]=document.getElementById("mesure["+j+"]["+s+"]").getAttribute("bgColor");
        casacocher[j][s]=document.getElementById("mesure["+j+"]["+s+"]").textContent;
    }
 
    // Modification dynamique de la valeur de la case à cocher
    if(analyse[s].checked)
    {
        document.getElementById("analyse["+s+"]").setAttribute("value","on");
        document.getElementById("analyse["+s+"]").setAttribute("checked","cheched");
        alert('value : '+analyse[s].value);
        alert('checked : '+analyse[s].checked);
    }
    else
    {
        document.getElementById("analyse["+s+"]").setAttribute("value","");
        document.getElementById("analyse["+s+"]").setAttribute("checked","");
        alert('value : '+analyse[s].value);
        alert('checked : '+analyse[s].checked);
    }
 
    // Modification dynamique de la couleur de fond de la colonne
    for(j=0;j<nbLignes1;j++)
    {
        // if 1
        if(analyse[s].checked && casacocher[j][s]==="on")
        {
            // Couleur de la cellule
            document.getElementById("mesure["+j+"]["+s+"]").setAttribute("bgColor",couleurFond);
            //alert(analyse[s]);
            alert("If 1");
        }
 
        // if 2
        else if(analyse[s].checked && casacocher[j][s]==="")
        {
            document.getElementById("mesure["+j+"]["+s+"]").setAttribute("bgColor","#909090");
            alert("If 2");
        }
 
        // if 3
        else if((!analyse[s].checked && casacocher[j][s]==="") || (!analyse[s].checked && casacocher[j][s]==="on"))
        {
            document.getElementById("mesure["+j+"]["+s+"]").setAttribute("bgColor","#909090");
            alert("If 3");
        }
 
        // Erreur
        else
        {
            alert("Erreur !!!");
        }
    }
 
    return (true);
}

**NoSmoking** · 03/07/2013, 18h27

Bonjour,
je pensais que réponse avait été donnée sur http://www.developpez.net/forums/d13...uleur-colonne/

me trompe je ???

**zozoman** · 03/07/2013, 20h00

Pas vraiment : j'ai créé des classes pour mes couleurs de fond, j'ai affiché les valeurs de mes cellules (tout en rendant le texte invisible), placé des identifiants dans mes span mais j'ai bien du mal en JS et je ne veux pas faire de JQuery (J'ai déjà utilisé 6 langages différents pour l'application, mon cerveau ne peut plus en acquérir davantage pour l'instant (je viens de terminer ma reconversion en 1 an))

Pourriez vous rejeter un œil sur mon code ?

**zozoman** · 04/07/2013, 11h49

Mes erreurs étaient simplement au niveau de mon HTML : l'extraction du texte de mes cellules n'étaient pas "on" ou "" mais "on " ou " ".

Le code est certainement très long pour ce petit résultat mais ça marche

voici le code JS

Code javascript :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
function griseChamp(s)
{
    var j;
    var nbLignes=document.getElementById("tbFAJ1").getElementsByTagName("tr").length;
    var couleurFond=document.getElementsByTagName("thead")[0].getAttribute("bgcolor");
    var couleurPolice;
    if(couleurFond==="#FFC0CB")
    {
        couleurPolice="Ag";
    }
    else if(couleurFond==="#DAA520")
    {
        couleurPolice="Au";
    }
    else if(couleurFond==="#90EE90")
    {
        couleurPolice="Ni";
    }
    else if(couleurFond==="#1E90FF")
    {
        couleurPolice="PdNi";
    }
    else if(couleurFond==="#A9A9A9")
    {
        couleurPolice="SnPb";
    }
    else if(couleurFond==="#A0522D")
    {
        couleurPolice="stripper";
    }
 
 
 
    // Déclaration du tableau 1 dimension analyse[i]
    var analyse=new Array();
    analyse[s]=document.getElementById("analyse["+s+"]");
 
    // Déclaration du tableau à 2 dimensions mesure[j][i]
    var couleur=new Array();
    var casacocher=new Array();
    for(j=0;j<nbLignes;j++)
    {    
        couleur[j]=new Array();
        casacocher[j]=new Array();
 
        couleur[j][s]=document.getElementById("mesure["+j+"]["+s+"]").getAttribute("bgColor");
        casacocher[j][s]=document.getElementById("couleur["+j+"]["+s+"]").textContent;
    }
 
    // Modification dynamique de la valeur de la case à cocher
    if(analyse[s].checked)
    {
        document.getElementById("analyse["+s+"]").setAttribute("value","on");
        document.getElementById("analyse["+s+"]").setAttribute("checked","cheched");
    }
    else
    {
        document.getElementById("analyse["+s+"]").setAttribute("value","");
        document.getElementById("analyse["+s+"]").setAttribute("checked","");
    }
 
    // Modification dynamique de la couleur de fond de la colonne
    for(j=0;j<nbLignes;j++)
    {
        if(analyse[s].checked && casacocher[j][s]==="on")
        {
            // Couleur de la cellule
            document.getElementById("mesure["+j+"]["+s+"]").setAttribute("bgColor",couleurFond);
 
            // Couleur de la police
            document.getElementById("couleur["+j+"]["+s+"]").setAttribute("class",couleurPolice);
        }
 
        // if 2
        else if(analyse[s].checked && casacocher[j][s]==="")
        {
            document.getElementById("mesure["+j+"]["+s+"]").setAttribute("bgColor","#909090");
            document.getElementById("couleur["+j+"]["+s+"]").setAttribute("class","grise");
        }
 
        // if 3
        else if((!analyse[s].checked && casacocher[j][s]==="") || (!analyse[s].checked && casacocher[j][s]==="on"))
        {
            document.getElementById("mesure["+j+"]["+s+"]").setAttribute("bgColor","#909090");
            document.getElementById("couleur["+j+"]["+s+"]").setAttribute("class","grise");
        }
 
        // Erreur
        else
        {
            alert("Erreur !!!");
        }
    }
    return (true);
}

et mon code HTML :

Code HTML :

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
 
<form id="formCreerFAJJour" action="" method="POST">
   <table class="tblFAJ">
       <caption>Analyses de routine avant ajouts</caption>
       <thead id="thFAJ1" bgcolor="#DAA520">
           <tr>
               <th class="col1" rowspan="2">Référence Bain</th>
               <th class="col234" rowspan="2" colspan="3">Compteur journalier<br>RAZ si analyse</th>
               <th class="coli">Volume Bain<br>L</th>
               <th class="coli">Or<br>g/L</th>
               <th class="coli">Cobalt Total<br>mg/L</th>
               <th class="coli">pH<br></th>
               <th class="coli">Densité<br></th>
           </tr>
           <tr>
               <th class="coli">Analysé                    <input name="analyse[0]" id="analyse[0]" value="on" checked="checked" onchange="griseChamp(0);" type="checkbox"></th>
               <th class="coli">Analysé                    <input name="analyse[1]" id="analyse[1]" value="on" checked="cheched" onchange="griseChamp(1);" type="checkbox"></th>
               <th class="coli">Analysé                    <input name="analyse[2]" id="analyse[2]" value="on" checked="checked" onchange="griseChamp(2);" type="checkbox"></th>
               <th class="coli">Analysé                    <input name="analyse[3]" id="analyse[3]" value="on" checked="checked" onchange="griseChamp(3);" type="checkbox"></th>
               <th class="coli">Analysé                    <input name="analyse[4]" id="analyse[4]" value="on" checked="checked" onchange="griseChamp(4);" type="checkbox"></th>
           </tr>
       </thead>
       <tbody id="tbFAJ1" bgcolor="#DAA520">
           <tr>
               <td class="col1" name="bain[]">B 6,3</td>
               <td class="col2">9000<br>A.mn</td>
               <td class="col3"></td>
               <td class="col4">RAZ<br><input name="raz" id="raz" type="checkbox"></td>
                   <td class="coli" name="mesure[0][0]" id="mesure[0][0]" value="on" bgcolor="#DAA520"><span class="Au" id="couleur[0][0]">on</span>             
                                                </td>
                   <td class="coli" name="mesure[0][1]" id="mesure[0][1]" value="on" bgcolor="#DAA520"><span class="Au" id="couleur[0][1]">on</span>             
                                                </td>
                   <td class="coli" name="mesure[0][2]" id="mesure[0][2]" value="on" bgcolor="#DAA520"><span class="Au" id="couleur[0][2]">on</span>             
                                                </td>
                   <td class="coli" name="mesure[0][3]" id="mesure[0][3]" value="on" bgcolor="#DAA520"><span class="Au" id="couleur[0][3]">on</span>             
                                                </td>
                   <td class="coli" name="mesure[0][4]" id="mesure[0][4]" value="on" bgcolor="#DAA520"><span class="Au" id="couleur[0][4]">on</span>             
                                                </td>
           </tr>
 
Merci pour votre patience

changer la couleur d'une cellule après clic sur case à cocher

JavaScript

Discussions similaires

Partager

Partager