Discussion :

[zozoman]

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 :

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

[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

[Bovino]

Avant ça, je pense qu'il serait judicieux d'apprendre les bases du HTML et de JavaScript...

Code :

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

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 ?

Code :

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

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 !

[NoSmoking]

Bonjour,

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 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
<!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>

[sekaijin]

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

[zozoman]

Merci pour vos réponses.

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

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.

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