Changer couleur d'une case de tableau

Version imprimable

30/04/2010, 10h11
lou-03

Changer couleur d'une case de tableau

Bonjour,

Je voudrais changer la couleur de fond de ma case en fonction de la valeur qu'elle contient.
Voici mon code :

Code:

<td align="right" style="color:Black;background-color:#33e6aa;font-family:Arial;font-size:8pt;width:55px;"><% =mavaleur %></td>

C'est la partie en violet que je voudrais changer. J'avais essayé en appelant une fonction de mon code behing grâce à un id mais si je dois mettre un id à chaque ligne je n'ai pas fini ^^.

Sauriez-vous comment faire et si possible sans utiliser javascript?

Merci
30/04/2010, 11h13
Nicolas Esprit

Bonjour,

Tu as plusieurs possibilités. La première est d'utiliser le contrôle ASP.NET Table et non le contrôle HTML table de base. Ainsi tu y auras accès dans ton code-behind. L'inconvénient est que ta page sera plus lourde.

Ensuite, tu peux modifier le rendu HTML de ta page via la méthode Render. L'inconvénient est que si tu utilises des UpdatePanels, tu risques d'avoir des surprises.

Egalement, tu pourrais binder dynamiquement la couleur dans le HTML ( comme tu le fais pour ta valeur, là tu auras juste un test du genre : "Si valeur > seuil alors telle couleur, sinon telle autre couleur). C'est le plus simple je pense.

Enfin, vu que tu remplis un tableau avec des valeur et que tu souhaites avoir un formatage des couleurs ou d'autres propriétés en fonction de ces valeurs, tu peux peut être te pencher sur l'utilisation d'une GridView (à voir si c'est vraiment utile en fonction de ton besoin).

En espérant t'avoir aidé.
30/04/2010, 11h43
lou-03

Merci pour tes explications :).

Citation:

Egalement, tu pourrais binder dynamiquement la couleur dans le HTML ( comme tu le fais pour ta valeur, là tu auras juste un test du genre : "Si valeur > seuil alors telle couleur, sinon telle autre couleur). C'est le plus simple je pense.

Le problème c'est que si je met background-color:<% =fonction %> il me dit que la syntaxe n'est pas valide. C'est bien comme ça qu'il fallait faire ?

Je vais tester avec une GridView j'aurais peut être plus de facilité à colorer mes cases.

Merci pour ton aide!
30/04/2010, 15h13
lou-03

Pour finir je n'ai pas utilisé de GridView car j'avais des données qui ne me servaient pas forcément et donc ca devenait aussi compliqué que le tableau ^^.
J'ai utilisé cette méthode que j'ai trouvé sur le net :

Code:

mesId[i].Attributes.CssStyle.Add("background-color", "green");

Cela me permet de changer la propriété background-color de ma ligne td.
Je boucle sur mes id (que j'ai récupéré dans un tableau) et en fonction des valeurs je change la couleur.

C'est à mon avis une méthode un peu "archaïque" mais bon au moins ça marche :ccool:.

Je te remercie encore pour ton aide ;)
30/04/2010, 15h33
Nicolas Esprit

Effectivement, c'est une autre façon de faire. Peux tu au passage, poster ta fonction pour récupérer les ID de tes cells, cela devrait bien aider ceux qui reliront ce topic plus tard, merci

Également, pense au statut [Résolu]

Voici ma fonction :

Côté code behind :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public void couleur()
        {
            //tableau valeurs
            int[] valeurs = new int[8] {val1, val2, val3, val4, val5, val6, val7, val8};
            //tableau avec mes id
            HtmlTableCell[] ids = new HtmlTableCell[8] { id1, id2, id3, id4, id5, id6, id7, id8 };
            //pour chaque id on va regarder si la valeur correspondante est > ou < à 0
            for (int i = 0; i < ids.Length; i++)
            {
 
                if (valeurs[i] >= 0)
                {
                    //si c'est >0 on met la cellule en vert
                    ids[i].Attributes.CssStyle.Add("background-color", "green");
                }
                else
                {
                    ids[i].Attributes.CssStyle.Add("background-color", "red");
                }
            }
        }

Côté aspx :

Code:

<td id="id5" runat="server" align="right" style="color:Black;background-color:#33e6aa;font-family:Arial;font-size:8pt;width:55px;"><% =val5 %></td>

à ajouter
ce qui sera modifier par la fonction couleur()

30/04/2010, 15h58
Nicolas Esprit

OK, merci pour le code.

Mais du coup en voyant cela, je me dis que j'aurais du t'orienter vers JQuery dès le début :-)
30/04/2010, 16h36
lou-03

Ah...tant pis maintenant c'est fait ^^