Tableau et couleur des cellules

Version imprimable

05/02/2008, 15h07
DaisyVIP

Tableau et couleur des cellules

Bonjour
J'aimerai récupérer une couleur et l'appliquer à certaine cellules du tableau en fonction d'une évalution faite au préalable (vert, orange ou rouge).
J'aimerai savoir comment faire. Est-il possible d'utiliser un tableau HTML ou faut-il utiliser autre chose.
Merci de votre aide.
05/02/2008, 15h30
kazoumoulox

tu peux toujours utiliser un gridview...et colorer certaines cellules en fonction d'un parametre...que tu peux cacher dans les cellules (hiddentext)...en grs tu devra parcourir les cellules de la gridview, faire un test sur la valeur caché dans une cellule et enfonction de cela changer la couleur de fond... (il me semble que j'ai fait un post dessus il y a quelques temps (en 2007))...cherche bien sur le forum!

De plus, autre avantage de la gridview, elle est très manipulable, tu peux cacher des colonnes, selectionner des lignes etc... et binder des données depuis une datasource (via une datatable je crois).
Voila! ++
05/02/2008, 15h31
lapanne

Comment est créé ton tableau ? Si c'est objet Table asp.Net, alors :

Code:

Table1.Rows[0].Cells[0].BackColor = System.Drawing.Color.Aqua;

et si c'est un tableau HTML, css est ton ami :)
06/02/2008, 11h11
DaisyVIP

bon je vous exlique mieux...
alors voila, lorsque mon appli est lancé, on voit apparaître un tableau (ou quelque chose de similaire), on clique sur une des cases, ce qui nous envoie vers une grille d'évaluation.
La personne remplie cette grille (avec des checkboxes + la case se colore).
Vert : Compétence acquise
Orange : Compétence en cours d'acquisition
Rouge : Compétence non acquise
Comment puis-je récupérer cette couleur de mon évaluation finale, et l'affecter à la case du tableau sur laquelle j'avais cliqué au préalable?
Merci de votre aide par avance.
06/02/2008, 13h15
lapanne

Euh... faudrait avoir un peu de code parce que là c'est trés vague ^^
Comment est généré la grille d'évaluation ? Comment est récupéré l'évaluation ? Côté client ? Côté Serveur ?

voici le code aspx pour le tableau:

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
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Test lien tableau</title>
 
    <script type="text/javascript"> 
function Couleur (id) 
{ 
 
/* --- 
- rien, on clic -> on surligne 
- case deja surlignée, clic sur autre -> on enleve la 1ere, met la 2e 
- case déjà surlignée, clic sur même -> on enleve la 1ere */ 
 
// ici on configure la couleur au clic: 
this.couleur = '#FF0000'; 
 
this.id=id; 
 
if (typeof this.highlighted=='undefined' || this.highlighted=='') 
{ 
document.getElementById(this.id).style.background = this.couleur; 
this.highlighted=this.id; 
} 
else 
{ 
if (this.id!=this.highlighted) 
{ 
document.getElementById(this.id).style.background = this.couleur; 
document.getElementById(this.highlighted).style.background = 'transparent'; 
this.highlighted = this.id; 
} 
else 
{ 
document.getElementById(this.id).style.background = 'transparent'; 
this.highlighted = ''; 
} 
} 
} 
</script> 
 
</head>
 
<body>
 
  <table width="200" border="1" cellspacing="0" cellpadding="0" bgcolor="#ffcc99" bordercolor="#000000" bordercolordark="#000000" bordercolorlight="#000000">
 
  <tr>
    <td id="Case1" onclick="document.location='Testage.aspx';" style="cursor:pointer; width: 60px; height: 21px;">&nbsp;</td>
    <td onclick="document.location='Testage.aspx';" style="cursor:pointer; width: 60px; height: 21px;">&nbsp;</td>
    <td onclick="document.location='Testage.aspx';" style="cursor:pointer; width: 60px; height: 21px;">&nbsp;</td>
  </tr>
 
  <tr>
    <td onclick="document.location='Testage.aspx';" style="cursor:pointer; width: 60px;">&nbsp;</td>
    <td onclick="document.location='Testage.aspx';" style="cursor:pointer; width: 60px;">&nbsp;</td>
    <td onclick="document.location='Testage.aspx';" style="cursor:pointer; width: 60px;">&nbsp;</td>
  </tr>
 
  <tr>
    <td style="width: 60px">&nbsp;</td>
    <td style="width: 60px">&nbsp;</td>
    <td style="width: 60px">&nbsp;</td>
  </tr>
 
  <tr>
    <td style="width: 60px">&nbsp;</td>
    <td style="width: 60px">&nbsp;</td>
    <td style="width: 60px">&nbsp;</td>
  </tr>
 
  <tr>
    <td style="width: 60px;">&nbsp</td>
    <td style="width: 60px;">&nbsp</td>
    <td style="width: 60px;">&nbsp</td>
  </tr>
 
  <tr>
    <td style="width: 60px">&nbsp;</td>
    <td style="width: 60px">&nbsp;</td>
    <td style="width: 60px">&nbsp;</td>
  </tr>
 
  </table>
 
 
</body>
</html>

Le code pour laisser l'évaluation (aspx):

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
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Testage.aspx.cs" Inherits="Testage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>TEST</title>
    <script type="text/javascript"> 
function Couleur (cellId,ckId) 
{ 
 
/* Passe toutes les checkBox en checked=false*/
ResetCheckBox('monTableau',ckId)
 
/* --- 
- rien, on clic -> on surligne 
- case deja surlignée, clic sur autre -> on enleve la 1ere, met la 2e 
- case déjà surlignée, clic sur même -> on enleve la 1ere */ 
 
// ici on configure la couleur au clic: 
 
if ( cellId=="c1")
{
    this.couleur = '#32CD32';
    this.id=cellId;
}
 
if ( cellId=="c2")
{
    this.couleur = '#FFD700';
    this.id=cellId;
}
 
if ( cellId=="c3")
{
    this.couleur = '#FF6347';
    this.id=cellId;
}
 
if (typeof this.highlighted=='undefined' || this.highlighted=='') 
{ 
document.getElementById(this.id).style.background = this.couleur; 
this.highlighted=this.id; 
} 
else 
{ 
if (this.id!=this.highlighted) 
{ 
document.getElementById(this.id).style.background = this.couleur; 
document.getElementById(this.highlighted).style.background = 'transparent'; 
this.highlighted = this.id; 
} 
else 
{ 
document.getElementById(this.id).style.background = 'transparent'; 
this.highlighted = ''; 
} 
} 
}
 
 function ResetCheckBox(idTable,idCk)
   {
     inputs=document.getElementById(idTable).getElementsByTagName('input');
      for (var i =0;i<inputs.length;i++)
      {
 
        if (inputs[i].type == 'checkbox' && idCk!=inputs[i].id)
        {
          inputs[i].checked=false;
        }
      }
  }
</script> 
 
</head>
<body>
    <form id="form2" runat="server">
    <div>
        Vous êtes :
        <asp:Label ID="lblID_user" runat="server"></asp:Label><br />
        <br />
        Fiche de liaison<br />
          <table id="monTableau" width="300" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td  width="15">
              Freins</td>
          <td id="c1" width="15"><asp:CheckBox onclick="Couleur('c1',this.id)" ID="CheckBox1" runat="server" OnCheckedChanged="CheckBox1_CheckedChanged"/></td>
          <td id="c2" width="15"><asp:CheckBox onclick="Couleur('c2',this.id)" ID="CheckBox2" runat="server" OnCheckedChanged="CheckBox2_CheckedChanged"/></td>
          <td id="c3" width="15"><asp:CheckBox onclick="Couleur('c3',this.id)" ID="CheckBox3" runat="server" OnCheckedChanged="CheckBox3_CheckedChanged"/></td>
 
        </tr>
      </table>
        <br />
    </div>
        <asp:Button ID="btnValider" runat="server" Text="Valider" OnClick="btnValider_Click" />
    </form>
</body>
</html>

et le code aspx.cs de ce prototype de grille d'évaluation :

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
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
 
public partial class Testage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
   /*--------------------------Récupération de l'identifiant (du Formateur)-----------------------------*/
        string TestLogin = System.Web.HttpContext.Current.User.Identity.Name.ToString();
        string login = TestLogin.Substring(TestLogin.IndexOf('\\') + 1);
        lblID_user.Text = login;
 
    }
 
    protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
    {
        if (CheckBox1.Checked == true)
        {
            // Chaîne de connexion
            string connectString = "Data Source=PROD006\\SQLEXPRESS;Initial Catalog=prototype;Integrated Security=True";
            // Objet connection
            SqlConnection connection = new SqlConnection(connectString);
            // Ouverture
            connection.Open();
 
            // Objet Command
            //SqlCommand command = new SqlCommand("UPDATE ACTIVITE set version = version + 1", connection);
 
            SqlCommand command = new SqlCommand("INSERT INTO ACTIVITE (id_user, type_act, version, evaluation) values ('" + lblID_user.Text + "', 'freins' ,'1', 'Acquis')", connection);
            // Execution
            command.ExecuteNonQuery();
            // Fermeture connection
            connection.Close();
 
        }
    }
 
    protected void CheckBox2_CheckedChanged(object sender, EventArgs e)
    {
        if (CheckBox2.Checked == true)
        {   // Chaîne de connexion
            string connectString = "Data Source=PROD006\\SQLEXPRESS;Initial Catalog=prototype;Integrated Security=True";
            // Objet connection
            SqlConnection connection = new SqlConnection(connectString);
            // Ouverture
            connection.Open();
            // Objet Command
            SqlCommand command = new SqlCommand("INSERT INTO ACTIVITE (id_user, type_act, version, evaluation) values ('" + lblID_user.Text + "', 'freins' ,'1', 'En cours d''acquisition')", connection);
            command.ExecuteNonQuery();
            // Fermeture connection
            connection.Close();
 
        }
    }
    protected void CheckBox3_CheckedChanged(object sender, EventArgs e)
    {
        if (CheckBox3.Checked == true)
        {   // Chaîne de connexion
            string connectString = "Data Source=PROD006\\SQLEXPRESS;Initial Catalog=prototype;Integrated Security=True";
            // Objet connection
            SqlConnection connection = new SqlConnection(connectString);
            // Ouverture
            connection.Open();
            // Objet Command
            SqlCommand command = new SqlCommand("INSERT INTO ACTIVITE (id_user, type_act, version, evaluation) values ('" + lblID_user.Text + "', 'freins' ,'1', 'Non acquis')", connection);
            command.ExecuteNonQuery();
            // Fermeture connection
            connection.Close();
 
        }
    }
    protected void btnValider_Click(object sender, EventArgs e)
    {
 
    }
}

Si vous pouvez m'aidez, merci beaucoup :king:

06/02/2008, 16h30
lapanne

Donc si j'ai bien compris, l'utilisateur clique sur une check box et en fonction :
1) la BDD est rempli avec Acquis, en cours ou non acquis.
2) en fonction de ça, tu colores la case de la page précédente.

Dans ce cas, il faut dans ta page avec le récap que tu utilises une table ASP.NET et que tu interroges la BDD pour récup les valeurs ('acquis, non acquis..) pour les colorer de la bonne couleur. Tout ceci côté serveur (côté c#).

Alors en fait oui la BD est remplie avec acquis, en cours, et non acquis.
La couleur n'est pas entrée dans la base de données. LA couleur est mise en fonction du script, elle est mise autour de la checkbox grâce à ceci:

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
<script type="text/javascript"> 
function Couleur (cellId,ckId) 
{ 
 
/* Passe toutes les checkBox en checked=false*/
ResetCheckBox('monTableau',ckId)
 
/* --- 
- rien, on clic -> on surligne 
- case deja surlignée, clic sur autre -> on enleve la 1ere, met la 2e 
- case déjà surlignée, clic sur même -> on enleve la 1ere */ 
 
// ici on configure la couleur au clic: 
 
if ( cellId=="c1")
{
    this.couleur = '#32CD32';
    this.id=cellId;
}
 
if ( cellId=="c2")
{
    this.couleur = '#FFD700';
    this.id=cellId;
}
 
if ( cellId=="c3")
{
    this.couleur = '#FF6347';
    this.id=cellId;
}
 
if (typeof this.highlighted=='undefined' || this.highlighted=='') 
{ 
document.getElementById(this.id).style.background = this.couleur; 
this.highlighted=this.id; 
} 
else 
{ 
if (this.id!=this.highlighted) 
{ 
document.getElementById(this.id).style.background = this.couleur; 
document.getElementById(this.highlighted).style.background = 'transparent'; 
this.highlighted = this.id; 
} 
else 
{ 
document.getElementById(this.id).style.background = 'transparent'; 
this.highlighted = ''; 
} 
} 
}
 
 function ResetCheckBox(idTable,idCk)
   {
     inputs=document.getElementById(idTable).getElementsByTagName('input');
      for (var i =0;i<inputs.length;i++)
      {
 
        if (inputs[i].type == 'checkbox' && idCk!=inputs[i].id)
        {
          inputs[i].checked=false;
        }
      }
  }
</script>

et donc ceci au niveau des cases :

Code:

1
2
3
<td id="c1" width="15"><asp:CheckBox onclick="Couleur('c1',this.id)" ID="CheckBox1" runat="server" OnCheckedChanged="CheckBox1_CheckedChanged"/></td>
          <td id="c2" width="15"><asp:CheckBox onclick="Couleur('c2',this.id)" ID="CheckBox2" runat="server" OnCheckedChanged="CheckBox2_CheckedChanged"/></td>
          <td id="c3" width="15"><asp:CheckBox onclick="Couleur('c3',this.id)" ID="CheckBox3" runat="server" OnCheckedChanged="CheckBox3_CheckedChanged"/></td>

Donc comment puis-je mettre la couleur adaptée à la bonne place dans mon tableau?

J'ai compris le principe, mais le problème est que je ne peux pas coder en C# une cellule en particulier avec le tableau HTML.

Aidez moi, s'il vous plait !