this.checked

**destructive** · 11/05/2007, 16h26

salut,

j'ai cet exemple de code javascript qui permet de cacher des lignes de tableau selon la couleur du texte que contient une cellule spécifique.
je voulais que le masquage sera fait grâce à un champ à cocher, voilà ce que j'ai écrit :

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
function detectcolumn(context, couleur, do_show) { 
 var stl;
    if (do_show) stl = "none"
    else         stl = "";
  var trs = document.getElementsByTagName("tr");
  for(var row=0;row<trs.length;row++) {
    if (trs[row].className==context) {
 
    var tds = trs[row].getElementsByTagName("td");
    for(var col=0;col<tds.length;col++) {
      if(tds[col].style.color==couleur)&& (trs[row].style.display!=stl){
	  trs[row].style.display == stl;
	  break;
	  }
	  else  {
	  continue;
    }
	}
	}
  }
}

la variable do_show sera après remplacé dans l'appel de fonction par "this.checked", mais ça marche pas !!

qq peut m'aider ?

voici tout le code HTML correspondant :

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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Untitled</title>
<script type="text/javascript">
function detectcolumn(context, couleur, do_show) { 
 var stl;
    if (do_show) stl = "none"
    else         stl = "";
  var trs = document.getElementsByTagName("tr");
  for(var row=0;row<trs.length;row++) {
    if (trs[row].className==context) {
 
    var tds = trs[row].getElementsByTagName("td");
    for(var col=0;col<tds.length;col++) {
      if(tds[col].style.color==couleur)&& (trs[row].style.display!=stl){
	  trs[row].style.display == stl;
	  break;
	  }
	  else  {
	  continue;
    }
	}
	}
  }
}
 
 
</script>
 
</head>
 
<body>
  <input type="checkbox" name="checkbox" id="checkbox" value="5"  class="box"  CHECKED onclick="detectcolumn('essai', 'rgb(255, 0, 0)', 'this.checked')"><label for="checkbox" title="show ok tests"> show ok tests </label>
 
 <TABLE  BORDER="1" CELLPADDING="1" CELLSPACING="0" WIDTH="100%">
 <tr><td bgcolor=blue> <A HREF="path_for_data"><FONT SIZE=2></FONT></A> &nbsp; <FONT COLOR=FFFFFF><B>Results</B></FONT></td>
 <td class="context1" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context1</B></FONT></td>
 <td  id="col4" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context2</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context3</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context4</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context5</B></FONT></td>
 </tr>
 <tr ><td colspan=6 align=left><B> <a href="javascript:void(0)" onclick="clicMenu();">Titre1</a></B></td></tr>
 <tr class="essai" id="menu1" >
 <td align=left><A HREF="test1"><FONT SIZE=2></FONT></A> &nbsp; <A HREF="" ><FONT SIZE=2> 
 
   porcedure1
                      </FONT></A> </td>
 <td class="context1" align=center>45</td>
 <td id="col1" align=center><FONT COLOR="green"><B>45</B></FONT></td>
 <td align=center><FONT COLOR="green"><B>100.0</B></FONT></td>
 <td align=center><FONT SIZE=2>date</FONT></td>
 <td align=center><FONT SIZE=2> time</FONT></td>
 </tr>
 <tr class="essai" id="menu2">
 <td align=left><A HREF="test2"><FONT SIZE=2></FONT></A> &nbsp; <A HREF=""><FONT SIZE=2>procedure2</FONT></A> </td>
 <td class="context1" align=center>45</td>
 <td class="context1" align=center style='color: #FF0000'>context1</td>
 <td align=center style='color: #FF0000'><B>100.0</B></td>
 <td align=center><FONT SIZE=2>date</FONT></td>
 <td align=center><FONT SIZE=2> time</FONT></td>
 </tr>
 
 <tr class="essai" id="menu3">
 <td align=left><A HREF="test3"><FONT SIZE=2></FONT></A> &nbsp; <A HREF=""><FONT SIZE=2>procedure3</FONT></A> </td>
 <td class="context1" align=center>45</td>
 <td class="context1" style='color: #FFFFFF'>context1</td>
 <td align=center style='color: #FF0000'><B>100.0</B></td>
 <td align=center><FONT SIZE=2>date</FONT></td>
 <td align=center><FONT SIZE=2> time</FONT></td>
 </tr>
 </TABLE>
 
</body>
</html>

merci.

**E.Bzz** · 11/05/2007, 16h29

Code :

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

onclick="detectcolumn('essai', 'rgb(255, 0, 0)', this.checked)"

Sans les ' '

A+

**destructive** · 11/05/2007, 16h46

salut,
Bonne remarque !
mais malgré que je lai rectifié ça marche pas aussi :

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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Untitled</title>
<script type="text/javascript">
function detectcolumn(context, couleur, do_show) { 
 var stl;
    if (do_show) stl = "none"
    else         stl = "";
  var trs = document.getElementsByTagName("tr");
  for(var row=0;row<trs.length;row++) {
    if (trs[row].className==context) {
 
    var tds = trs[row].getElementsByTagName("td");
    for(var col=0;col<tds.length;col++) {
      if(tds[col].style.color==couleur)&& (trs[row].style.display!=stl){
	  trs[row].style.display == stl;
	  break;
	  }
	  else  {
	  continue;
    }
	}
	}
  }
}
 
 
</script>
 
</head>
 
<body>
  <input type="checkbox" name="checkbox" id="checkbox" value="5"  class="box"  CHECKED onclick="detectcolumn('context1', 'rgb(255, 0, 0)', this.checked)"><label for="checkbox" title="show ok tests"> show ok tests </label>
 
 <TABLE  BORDER="1" CELLPADDING="1" CELLSPACING="0" WIDTH="100%">
 <tr><td bgcolor=blue> <A HREF="path_for_data"><FONT SIZE=2></FONT></A> &nbsp; <FONT COLOR=FFFFFF><B>Results</B></FONT></td>
 <td class="context1" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context1</B></FONT></td>
 <td  id="col4" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context2</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context3</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context4</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context5</B></FONT></td>
 </tr>
 <tr ><td colspan=6 align=left><B> <a href="javascript:void(0)" onclick="clicMenu();">Titre1</a></B></td></tr>
 <tr class="essai" id="menu1" >
 <td align=left><A HREF="test1"><FONT SIZE=2></FONT></A> &nbsp; <A HREF="" ><FONT SIZE=2> 
 
   porcedure1
                      </FONT></A> </td>
 <td class="context1" align=center>45</td>
 <td id="col1" align=center><FONT COLOR="green"><B>45</B></FONT></td>
 <td align=center><FONT COLOR="green"><B>100.0</B></FONT></td>
 <td align=center><FONT SIZE=2>date</FONT></td>
 <td align=center><FONT SIZE=2> time</FONT></td>
 </tr>
 <tr class="essai" id="menu2">
 <td align=left><A HREF="test2"><FONT SIZE=2></FONT></A> &nbsp; <A HREF=""><FONT SIZE=2>procedure2</FONT></A> </td>
 <td class="context1" align=center>45</td>
 <td class="context1" align=center style='color: #FF0000'>context1</td>
 <td class="context1" align=center style='color: #FF0000'><B>100.0</B></td>
 <td align=center><FONT SIZE=2>date</FONT></td>
 <td align=center><FONT SIZE=2> time</FONT></td>
 </tr>
 
 <tr class="essai" id="menu3">
 <td align=left><A HREF="test3"><FONT SIZE=2></FONT></A> &nbsp; <A HREF=""><FONT SIZE=2>procedure3</FONT></A> </td>
 <td class="context1" align=center>45</td>
 <td class="context1" style='color: #FFFFFF'>context1</td>
 <td class="context1" align=center style='color: #FF0000'><B>100.0</B></td>
 <td align=center><FONT SIZE=2>date</FONT></td>
 <td align=center><FONT SIZE=2> time</FONT></td>
 </tr>
 </TABLE>
 
</body>
</html>

**E.Bzz** · 11/05/2007, 17h03

Envoyé par destructive

mais malgré que je lai rectifié ça marche pas aussi :

C'est à dire ?
Rien ?
Erreur ?
Laquelle ?

A+

**destructive** · 11/05/2007, 17h07

câd que lors de la sélection de ce champ rien ne change !!

**E.Bzz** · 11/05/2007, 17h17

Si tu fais

Code :

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

onclick="alert(this.checked);detectcolumn('context1', 'rgb(255, 0, 0)', this.checked)"

Est-ce qu'il t'affiche bien ce qu'il faut (true si coché) ?

Si tu ajoutes un alert(do_show) en 1° ligne de la fonction, il s'affiche ?

A+

**destructive** · 11/05/2007, 17h37

oui il affiche "true" si coché dans les deux cas mais est ce que cela peut être utile comme information ?

**E.Bzz** · 11/05/2007, 18h05

Envoyé par destructive

si coché dans les deux cas mais est ce que cela peut être utile comme information ?

Oui, car si le 2° s'affiche, ça veux dire que le bug est plus loin dans la fonction.
Par exemple, ça veut dire que ce n'est pas l'appel qui plante, que les évènements sont gérés correctement, et que c'est la bonne valeur qui est envoyée (contrairement à la correction précédente avec les ' ').

Ne te reste donc plus qu'à re-décortiquer la fonction elle-même ...

Mais y avait un post sur le sujet, non ?

A+

**Auteur** · 11/05/2007, 18h34

Le code je t'ai donné ne convient pas ? Remplace les boutons par des cases à cocher.

**destructive** · 14/05/2007, 14h11

Envoyé par Auteur

Le code je t'ai donné ne convient pas ? Remplace les boutons par des cases à cocher.

salut auteur, le code que tu as proposé est bon mais ce que je voulais c'est de s'assurer que l'effet que produit une case cochée sera automatiquement annulé quand elle ne l'est plus, câd si une case cochée permet de cacher qq lignes en rouge p.ex dès qu'on la décoche ces lignes seront réaffichées et pareil pour le cas ou la page est de nouveau reloaded...et ça en oubliant pour le moment le bouton "tout afficher" ..

**SpaceFrog** · 14/05/2007, 14h16

la capture du this.checked est assez versatile...
il faut souvent l'assortir d'un setTimeout ...

Code :

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

1
2
 
onclick="var check=this;setTimeout(function(){detectcolumn('context1', 'rgb(255, 0, 0)', check.checked)},100)"

**destructive** · 14/05/2007, 14h33

j'ai essayé ça avec un autre exemple moin compliqué qui cache un tableau en entier mais ça fonctionne plus !!
voilà le code :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
<head>
	<title>Untitled</title>
<script type="text/javascript">
function cachertbale(ident) {
 
 var tableau = document.getElementById(ident);
 
   if(tableau.style.display == "none") {
 
     tableau.style.display = "";
   }
   else {
 
     tableau.style.display = "none";
   }
 }
</script>
 
</head>
 
<body>
 
<input  type="checkbox" CHECKED  value="unmark all" onclick="var check=this;setTimeout(function(){cachertbale('results')},100") ><label>cacher le tableau</label>
 <TABLE id="results" BORDER="1" CELLPADDING="1" CELLSPACING="0" WIDTH="100%">
 <tr><td bgcolor=blue> <A HREF="path_for_data"><FONT SIZE=2></FONT></A> &nbsp; <FONT COLOR=FFFFFF><B>Results</B></FONT></td>
 <td class="context1" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context1</B></FONT></td>
 <td  id="col4" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context2</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context3</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context4</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context5</B></FONT></td>
 </tr>
 <tr ><td colspan=6 align=left><B> <a href="javascript:void(0)" onclick="clicMenu();">Titre1</a></B></td></tr>
 <tr class="essai" id="menu1" >
 <td align=left><A HREF="test1"><FONT SIZE=2></FONT></A> &nbsp; <A HREF="" ><FONT SIZE=2> 
 
   porcedure1
                      </FONT></A> </td>
 <td class="context1" align=center>45</td>
 <td id="col1" align=center><FONT COLOR="green"><B>45</B></FONT></td>
 <td align=center><FONT COLOR="green"><B>100.0</B></FONT></td>
 <td align=center><FONT SIZE=2>date</FONT></td>
 <td align=center><FONT SIZE=2> time</FONT></td>
 </tr>
 <tr class="essai" id="menu2">
 <td align=left><A HREF="test2"><FONT SIZE=2></FONT></A> &nbsp; <A HREF=""><FONT SIZE=2>procedure2</FONT></A> </td>
 <td class="context1" align=center>45</td>
 <td class="context1" align=center style='color: #FF0000'>context1</td>
 <td align=center style='color: #FF0000'><B>100.0</B></FONT></td>
 <td align=center><FONT SIZE=2>date</FONT></td>
 <td align=center><FONT SIZE=2> time</FONT></td>
 </tr>
 
 <tr class="essai" id="menu3">
 <td align=left><A HREF="test3"><FONT SIZE=2></FONT></A> &nbsp; <A HREF=""><FONT SIZE=2>procedure3</FONT></A> </td>
 <td class="context1" align=center>45</td>
 <td class="context1" style='color: #FFFFFF'>context1</td>
 <td align=center style='color: #FF0000'><B>100.0</B></FONT></td>
 <td align=center><FONT SIZE=2>date</FONT></td>
 <td align=center><FONT SIZE=2> time</FONT></td>
 </tr>
 </TABLE>
 
</body>
</html>

t'es sûr de la syntaxe spacefrog ?

**SpaceFrog** · 14/05/2007, 14h42

desolé une inversion entre " et ) à la fin ...
rectifié ...

**destructive** · 14/05/2007, 14h47

voir réponse suivante ..

**destructive** · 14/05/2007, 14h48

bon, quand je fais un reload le tableau se réaffiche mais la case reste cochée (malgré UNCHEKED ajoutée) , y a-t-il un moyen pour la case revient après chaque reload à l'état initial (non cochée) aussi ? comme ça le poroblème sera résolu ..