[c#] Changer la couleur d'éléments d'une table html

**Filippo** · 11/12/2006, 17h57

bonsoir,
j'aurais besoin, sur un click d'un CheckBoxList de changer la couleur de fond de lignes d'une table html.

J'ai défini les éléments de la table html comme ceci :

Code :

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

1
2
3
4
5
6
7
<table style="...">
            <tr>
                <td style="...">
                    <id="t_cbl_q_01_11"> ...
</td>
                <td style="..." id="t_cbl_q_01_12">
...

J'ai défini un événement javascript onclick sur le CheckBoxList :

Code :

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

1
2
3
4
<asp:CheckBoxList ID="cbl_q_01" onclick="PassageCbl('cbl_q_01')" runat="server" TabIndex="3" Width="286px">
                        <asp:ListItem Value="0">Non</asp:ListItem>
                        <asp:ListItem Value="1">Oui </asp:ListItem>
                   </asp:CheckBoxList>

J'ai écrit la fonction javascript dans la section html comem ceci :

Code :

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

1
2
3
4
5
function PassageCbl(Source)
    {
        document.all("t_" + Source + "_11").bgColor="magenta";
        document.all("t_" + Source + "_11").bgColor="magenta";
    }

Là il ne se passe rien quand on clique sur le CheckBoxList.

Quelqu'un a-t-il déjà fait ça ?

Merci

**pcdj** · 12/12/2006, 08h26

l'événement javascript onclick " n'appartient pas " par défaut au control CheckBoxList.
Il faut l'ajouter dans le code par exemple dans le form_load de cette manière :

Code :

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

this.cbl_q_01.Attributes.Add("onclick", "PassageCbl('cbl_q_01')")

et tu le supprimes du code HTML.

Par contre dans ta fonction javascript, tu effectues deux fois la même action,
et comme tu codes en dure le numéro "_11" le changement de couleur se fera toujours sur la même cellule...

**Filippo** · 12/12/2006, 09h18

Envoyé par pcdj

l'événement javascript onclick " n'appartient pas " par défaut au control CheckBoxList.
Il faut l'ajouter dans le code par exemple dans le form_load de cette manière :

Code :

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

this.cbl_q_01.Attributes.Add("onclick", "PassageCbl('cbl_q_01')")

et tu le supprimes du code HTML.

Par contre dans ta fonction javascript, tu effectues deux fois la même action,
et comme tu codes en dure le numéro "_11" le changement de couleur se fera toujours sur la même cellule...

Merci pcdj,
je me suis trompé le premier appel portait sur le numéro_11, l'autre sur _12.

J'ai déjà utilisé le déclenchement de onclick d'un CheckBoxList pour appeler une fonction javascript qui produisait une alerte.

Avec l'ajout de

Code :

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

this.cbl_q_01.Attributes.Add("onclick", "PassageCbl('cbl_q_01')")

dans le form load j'obtiens un message "error on page" sur click dans cbl_q_01.

Sans cet ajout dans le form load mais en modifiant la fonction comme ceci ça marche, mais juste pour le checkboxlist. Je cherche à atteindre la ligne du tableau dans laquelle le CheckBoxList est situé.

Code :

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

1
2
3
4
function PassageCbl(Source)
    {
       document.all(Source).bgColor="magenta";
        document.all(Source).fgColor="white";    }

**pcdj** · 12/12/2006, 10h38

C'est bizarre, je l'ai testé et je n'ai pas cette erreur chez moi.

**wayak3** · 13/12/2006, 09h33

teste ce bout de code les éléments importants sont dans le js

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
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script>
function laction(child)
{
<div style="margin-left:40px">//la case à cocher
child.setAttribute("style","background-color:green;");
 
//la cellule
cellule = child.parentNode;
cellule.setAttribute("style","background-color:Yellow;color:Green;");
//la ligne
ligne = cellule .parentNode;
ligne.setAttribute("style","background-color:Blue;color:Green;");</div>}
</script>
 
</head>
<body>
<form>
<table id="table">
<div style="margin-left:40px"><tr id="tr1">
<div style="margin-left:40px"><td id="td1">
td1
</td>
<td id="td2">
td2
<input type="checkbox" id="pass" onclick="laction(this)"/>
</td></div></tr>
<tr id="tr2">
<div style="margin-left:40px"><td id="td3">
td3
</td>
<td id="td4">
td4
</td></div></tr></div></table>
    </form>
</body>
</html>

je suppose que c sa que tu veux

[c#] Changer la couleur d'éléments d'une table html

ASP.NET

Discussions similaires

Partager

Partager