Changer la couleur d'une colonne

Version imprimable

Bonjour à tous,

Je voudrais changer la couleur d'une colonne sélectionnée avec une checkbox :

Lorsque je coche la 3ème checkbox de mon tableau, je vais avoir :

7 (nombre de ligne)
8 nombre de colonnes
#DAA520 : couleur du fond
false : checkbox décochée
2 : valeur de i

je n'arrive malheureusement pas à changer ma couleur de colonne, voici mon code 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
29
30
31
32
33
34
35
36
37
38
39
40
41
function griseChamp(i)
{
    var i,j;
    var analyse=[];
    var mesure=[];
    var nbLignes=document.getElementById("tbFAJ1").getElementsByTagName("tr").length; 
    var nbCols=document.getElementById("tbFAJ1").getElementsByTagName("tr")[0].getElementsByTagName("td").length;
    var couleurFond=document.getElementsByTagName("thead")[0].getAttribute("bgcolor");
    analyse[i]=document.getElementById("analyse["+i+"]");
 
 
    alert(nbLignes);
    alert(nbCols);
    alert(couleurFond);
    alert(analyse[i].checked);
    alert("i = "+i);
 
    if (analyse[i].checked)
    {
        for(j=0;j<nbLignes;j++)
        {
 
            analyse[i]="on";
            document.getElementById("tblFAJ1").getElementById("mesure["+j+"]["+i+"]").setAttribute("bgcolor",couleurFond);
            //alert("analyse["+i+"] : "+analyse[i]);
 
        }
    }
    else
    {
        for(j=0;j<nbLignes;j++)
        {
            analyse[i]="";
            document.getElementById("tblFAJ1").getElementById("mesure["+j+"]["+i+"]").setAttribute("bgcolor","#909090");
            //alert('off');
 
        }
    }
 return (true);
 
}

et le HTML :

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
<table class="tblFAJ">
<caption>Analyses de routine avant ajouts</caption>
<thead id="thFAJ1" bgcolor="#DAA520">
<tbody id="tbFAJ1" bgcolor="#DAA520">
<tr>
<td class="col1" name="bain[]">B 6,3</td>
<td class="col2">
<td class="col3"></td>
<td class="col4">
RAZ
<br>
<input id="raz" type="checkbox" name="raz">
</td>
<td id="mesure[0][0]" class="coli" value="on" name="mesure[0][0]"></td>
<td id="mesure[0][1]" class="coli" value="on" name="mesure[0][1]"></td>
<td id="mesure[0][2]" class="coli" value="on" name="mesure[0][2]"></td>
<td id="mesure[0][3]" class="coli" value="on" name="mesure[0][3]"></td>
</tr>
<tr>
<td class="col1" name="bain[]">CD 6</td>
<td class="col2">
<td class="col3"></td>
<td class="col4">
<td id="mesure[1][0]" class="coli" value="on" name="mesure[1][0]"></td>
<td id="mesure[1][1]" class="coli" value="on" name="mesure[1][1]"></td>
<td id="mesure[1][2]" class="coli" value="on" name="mesure[1][2]"></td>
<td id="mesure[1][3]" class="coli" value="on" name="mesure[1][3]"></td>

Pourriez vous m'aider

20/06/2013, 17h36
sekaijin

il existe une solution à la fois simple et compliqué de résoudre définitivement ce problème sans avoir à chercher les éléments du DOM impactés

1) définir un fichier css contenant les classes col1, col2, col3 etc. (une classe par colonne)

2) affecter la classe adéquat à chaque cellule de la table.

3) à l'init de la page utiliser document.styleSheets qui est une SyleSheetList pour trouver la bonne définition chercher par le sélécteur garder une référence sur chaque cssRule col2, col2 etc.

4) lorsqu'on coche la checkbox 3 utiliser la référence sur la cssRule col3 et lui changer l'attribut backgroundColor toutes les cellules avec la classe col3 change de couleur.

http://www.quirksmode.org/dom/w3c_css.html
http://www.quirksmode.org/dom/changess.html

simple car une mise à jour d'un objet change toutes le colonnes concernées
complexe car il n'est pas facile de retrouve la bonne cssRule

A+JYT
20/06/2013, 17h46
Bovino
Avant ça, je pense qu'il serait judicieux d'apprendre les bases du HTML et de JavaScript...
Code:

1 2 3 4 5 function griseChamp(i) { var i,j; ... }
A quoi peut bien te servir de déclarer une variable correspondant à un paramètre reçu par la fonction ? :koi:

Code:

document.getElementById("tblFAJ1").getElementById("mesure["+j+"]["+i+"]").setAttribute("bgcolor",couleurFond);

getElementById() est une propriété uniquement de l'objet document donc ta façon de les enchainer n'est pas bonne. D'autant plus qu'un id devant être unique dans la page, cette notation est inutile.

Côté HTML, c'est une horreur ! Les attributs que tu utilises n'ont pour la plupart rien à faire sur les balises auxquelles ils sont affectés !

Bonjour,

Citation:

Envoyé par sekaijin

2) affecter la classe adéquat à chaque cellule de la table.

il y a plus simple, la balise COL, je le concède très mal connue
exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Vous avez dit Balise COL ???]</title>
<style>
.col_1{ background:#EEF;}
.col_2{ background:#EFE;}
.col_3{ background:#FEE;}
</style>
</head>
<body>
<table>
  <col class="col_1"><col class="col_2"><col class="col_3">
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
  <tr><td>Col 1</td><td>Col 3</td><td>Col 3</td></tr>
</table>
</body>
</html>

20/06/2013, 20h04
sekaijin

Citation:

Envoyé par NoSmoking

Bonjour
...

Oui tu as raison, j'ai pensé à des DOMElements en général mais il est vrai que
pour les tableaux la notion de colonne est supporté directement par HTML

A+JYT
20/06/2013, 22h03
zozoman

Merci pour vos réponses.

Je trouve certains commentaires assez trash, je fais de mon mieux.:cry:

Je n'utiliserais pas la balise col pour l'instant mais j'ai pris bonne note et je l'utiliserai certainement plus tard. Je voudrais réaliser "l'exploit" en réalisant une boucle. :zoubi:

Je n'ai pas utilisé CSS car ma couleur est dans ma base de données et mon faible niveau de connaissance ...

Pour le reste, les attributs : je m'en sers en php

J'espère vous présenter ma solution demain

by

J'ai réussi à convertir mes colonnes en gris mais elles ne veulent pas reprendre la couleur qu'elles avaient avant (gris ou la couleur de fond du tableau).

Autre problème : La couleur est changée mais pour changer les valeurs de mes cellules (et non plus l'aspect), faut-il que je rajoute un input type="hidden" et des id à chacun de mes input ?

Voici le code d'une partie du formulaire :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
<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">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="return griseChamp(0);" type="checkbox"></th>
               <th class="coli">Analysé <input name="analyse[1]" id="analyse[1]" value="on" checked="checked" onchange="return griseChamp(1);" type="checkbox"></th>
               <th class="coli">Analysé <input name="analyse[2]" id="analyse[2]" value="on" checked="checked" onchange="return griseChamp(2);" type="checkbox"></th>
               <th class="coli">Analysé <input name="analyse[3]" id="analyse[3]" value="on" checked="checked" onchange="return griseChamp(3);" 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]" bgcolor="#DAA520"></td>
               <td class="coli" name="mesure[0][1]" id="mesure[0][1]" bgcolor="#DAA520"></td>
               <td class="coli" name="mesure[0][2]" id="mesure[0][2]" bgcolor="#DAA520"></td>
               <td class="coli" name="mesure[0][3]" id="mesure[0][3]" bgcolor="#DAA520"></td>
           </tr>
		   <tr>
               <td class="col1" name="bain[]">CD 6</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[1][0]" id="mesure[1][0]" bgcolor="#DAA520"></td>
               <td class="coli" name="mesure[1][1]" id="mesure[1][1]" bgcolor="#DAA520"></td>
               <td class="coli" name="mesure[1][2]" id="mesure[1][2]" bgcolor="#DAA520"></td>
               <td class="coli" name="mesure[1][3]" id="mesure[1][3]" bgcolor="#DAA520"></td>
           </tr>
		   <tr>
               <td class="col1" name="bain[]">EF 5,4</td>
               <td class="col2">1200<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[2][0]" id="mesure[2][0]" bgcolor="#DAA520"></td>
               <td class="coli" name="mesure[2][1]" id="mesure[2][1]" bgcolor="#DAA520"></td>
               <td class="coli" name="mesure[2][2]" id="mesure[2][2]" bgcolor="#DAA520"></td>
               <td class="coli" name="mesure[2][3]" id="mesure[2][3]" bgcolor="#DAA520"></td>
           </tr>
       </tbody>
   </table>

Voici le code 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
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
function griseChamp(i)
{
    var s;
    var analyse=[];
    var mesure=[];
    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;
    }
 
 
 
 
    analyse[i]=document.getElementById("analyse["+i+"]");
 
    for(s=0;s<nbLignes1;s++)
    {
        mesure[s]=[];
        mesure[s][i]=document.getElementById("mesure["+s+"]["+i+"]").getAttribute("bgcolor");
        alert(mesure[s][i]);
    }
 
 
    if (analyse[i].checked)
    {
        for(s=0;s<nbLignes1;s++)
        {
            alert('Cochée'+s);
            document.getElementById("mesure["+s+"]["+i+"]").setAttribute("bgcolor",mesure[s][i]);
        }
    }
    else
    {
        for(s=0;s<nbLignes1;s++)
        {
            alert('Non Cochée'+s);
            document.getElementById("mesure["+s+"]["+i+"]").setAttribute("bgcolor","#909090");
        }
    }
 
    return (true);
}

Pourriez vous m'aider ?

26/06/2013, 11h19
JérémieL

Bonjour,

Citation:

Envoyé par zozoman

J'ai réussi à convertir mes colonnes en gris mais elles ne veulent pas reprendre la couleur qu'elles avaient avant (gris ou la couleur de fond du tableau).

Tu peux le faire comme ça (dans ta boucle de cellules cochées) :

Code:

document.getElementById("mesure["+s+"]["+i+"]").setAttribute("bgcolor","transparent");

Citation:

Envoyé par zozoman

Autre problème : La couleur est changée mais pour changer les valeurs de mes cellules (et non plus l'aspect), faut-il que je rajoute un input type="hidden" et des id à chacun de mes input ?

Pour changer le contenu d'une cellule :

Code:

document.getElementById("mesure["+s+"]["+i+"]").innerHTML = "Ma valeur";
26/06/2013, 11h40
zozoman

Merci pour ta réponse, les cellules passent bien en gris mais avec l'attribut tranparent, tout redevient Jaune (certaines cellules sont grisées au départ et quand je coche une fois, toute la colonne devient grise, si je décoche, les cellule grises devraient réapparaitre dans cette colonne)

pas tout bien saisie ou tu voulais en venir :oops:

Au passage quand même
Code:

1 2 3 4 5 if (document.getElementById("tbFAJ1") === null) { nbLignes1 = 0; } else { nbLignes1 = document.getElementById("tbFAJ1").getElementsByTagName("tr").length; }
est avantageusement remplaçable par

Code:

nbLignes1 = document.getElementById("tbFAJ1").rows.length;

de même
Code:

1 2 3 4 5 if (document.getElementById("tbFAJ1") === null) { nbCols1 = 0; } else { nbCols1 = document.getElementById("tbFAJ1").getElementsByTagName("tr")[0].getElementsByTagName("td").length; }
par

Code:

nbCol1 = document.getElementById("tbFAJ1").rows[0].cells.length;

Je pense que l'on y verrait plus clair dans ton code.

27/06/2013, 11h35
zozoman

Mon tableau est comme une sorte de dammier ou les cases grises sont placées de manière aléatoire : je coche au dessus d'une colonne : toute la colonne devient grise, je recoche et la colonne reprend ses couleurs d'origine (avec ses couleurs que j'avais dans stocké dans mes variables : mesure[j][i]

Merci pour tes remarques, j'en prends bonne notes, ce sera corrigé

Je pense qu'il vaut mieux que tu passes par l'ajout/suppression de class à tes différents éléments cliqués.

Le seul impératif que tu auras est de les déclarer dans l'ordre croissant d'importance dans le CSS, ensuite le reste n'est qu'une question de gestion.

Un petit exemple très simplifié

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ajout/suppression class CSS</title>
<style>
#test{
  width:200px;
  height:200px;
}
/* ATTENTION l'ordre des classes à de l'importance */
.rouge{ background:#FAA;}
.bleu { background:#AAF;}
.gris { background:#AAA;}
</style>
</head>
<body>
<div id="test" class="rouge"></div>
<script>
var oTest = document.getElementById('test');
oTest.onclick = function(){
  if( this.className.indexOf('bleu') >-1){
    // class bleu déjà affectée on la supprime
    this.className = this.className.replace(' bleu','');
  }
  else{
    // on ajoutes la class bleu
    this.className += ' bleu';
  }
};
</script>
</body>
</html>

28/06/2013, 09h06
zozoman

Merci pour ta réponse, je vais étudier ta méthode malheureusement elle m'a l'air hors de portée pour moi :cry:

Voici, sur base de ton code HTML, ce que pourrait donner le script.
Il faut juste ajouter une ID à la TABLE

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
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
// pour clareté écriture
var oTmp;
// pour stockage réf. des cellules
var lstCells =[];
// get objet Table
var oTable = document.getElementById('id_table');
// get les checkbox dans la THEAD
var oParent = oTable.tHead;
var lstChecks = oParent.getElementsByTagName('INPUT');
// recherche et initaialisation des cellules
oParent = oTable.tBodies[0];
// nombre de TR à traiter
var lstTR = oParent.children;
var numLig,
    numCol,
    nbTD,
    nbTR = lstTR.length;
 
// parcours des lignes
var indFirstCell = 4; // pour tenir compte du décalage lié au COLSPAN dans la THEAD
for( numLig=0; numLig< nbTR; numLig++){
  // pour stockage des réf. des cellules
  lstCells[numLig] = [];
  // parcours des cellules à partir de la 4éme
  nbTD = lstTR[numLig].cells.length;
  for( numCol = indFirstCell; numCol< nbTD; numCol++){
    // stock élément dans liste
    oTmp = lstTR[numLig].cells[numCol];
    lstCells[numLig].push( oTmp);
    // affecte la fonction de changement de class
    oTmp.onclick = function(){
      // si pas la class gris trouvée
      if( this.className.indexOf('gris') <0){
        // test si class bleu posée
        if( this.className.indexOf('bleu') >-1){
          // class bleu déjà affectée on la supprime
          this.className = this.className.replace(' bleu','');
        }
        else{
          // on ajoutes la class bleu
          this.className += ' bleu';
        }
      }
    };
  }
}
// traitement des checkbox
for( numCol=0; numCol < lstChecks.length; numCol++){
  lstChecks[numCol].indCol = numCol; // repére sur indice des cellules
  // affecte fonction sur click
  lstChecks[numCol].onclick=function(){
    // récup. de l'état du check
    var state = !this.checked;
    // parcours la liste pour changement
    for( numLig = 0; numLig< lstCells.length; numLig++){
      oTmp = lstCells[numLig][this.indCol];
      // si existe on ne sais jamais
      if( oTmp){
        if( state){
          oTmp.className += ' gris';
        }
        else{
          oTmp.className = oTmp.className.replace(' gris','');
        }
      }
    }
  };
}

Je n'en dis pas plus la source est commentées ;)

01/07/2013, 11h23
zozoman

Merci pour ta réponse et merci pour ce gros boulot. :ccool:

J'avais envisagé l'utilisation d'Ajax.

J'essaie de pondre le code et je vous l'envoie
01/07/2013, 23h03
NoSmoking

Citation:

Envoyé par au début

je n'arrive malheureusement pas à changer ma couleur de colonne...

Citation:

Envoyé par plus tard

J'avais envisagé l'utilisation d'Ajax.

j'ai du mal à saisir le lien entre les deux.
02/07/2013, 10h03
sekaijin

je ne comprends pas on t'as donné plusieurs solutions

parcourir tout les élément à chaque fois n'a pas beaucoup de sens
on t'a expliqué comment ajouter/supprimer une classe
on t'a proposé de mettre une seule classe et expliqué comment la modifié
on t'a proposé d'utiliser la notion de colonne de l'élément table

bref on t'a montré comment faire. et en lisant c'est comme si tu refusais toute solution en cherchant à faire un truc à toi qui ne marche pas.

je ne pense pas que ce soit un pb de code mais d'ouverture d'esprit.
Change ta façon d'aborder le problème et ça marchera

A+JYT