this.checked

Version imprimable

this.checked

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:

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 !! :cry:
qq peut m'aider ?

voici tout le code HTML correspondant :

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

11/05/2007, 16h29
E.Bzz

Code:

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

Sans les ' ' ;)

A+

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

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

11/05/2007, 17h03
E.Bzz

Citation:

Envoyé par destructive

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

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

A+
11/05/2007, 17h07
destructive

câd que lors de la sélection de ce champ rien ne change !!
11/05/2007, 17h17
E.Bzz

Si tu fais

Code:

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+
11/05/2007, 17h37
destructive

oui il affiche "true" si coché dans les deux cas mais est ce que cela peut être utile comme information ?
11/05/2007, 18h05
E.Bzz

Citation:

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 ... :aie:

Mais y avait un post sur le sujet, non ? :mrgreen:

A+
11/05/2007, 18h34
Auteur

Le code je t'ai donné ne convient pas ? Remplace les boutons par des cases à cocher.
14/05/2007, 14h11
destructive

Citation:

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" ..
14/05/2007, 14h16
SpaceFrog
la capture du this.checked est assez versatile...
il faut souvent l'assortir d'un setTimeout ...
Code:

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

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

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

14/05/2007, 14h42
SpaceFrog

desolé une inversion entre " et ) à la fin ...
rectifié ...
14/05/2007, 14h47
destructive

voir réponse suivante ..
14/05/2007, 14h48
destructive

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 ..
14/05/2007, 15h00
SpaceFrog

unchecked ????

Code:

checked="false"
14/05/2007, 15h12
E.Bzz

Citation:

Envoyé par SpaceFrog

unchecked ????

Code:

checked="false"

... ou ne rien mettre.
14/05/2007, 15h14
SpaceFrog

Mais si tu ne mets rien sous FFX un retour ou history.bakc peut garder la selection en mémoire et la restituer ...
14/05/2007, 15h18
E.Bzz

Exact !
J'ai rien dit :mrgreen:

A+
14/05/2007, 16h41
destructive

ça change rien les amis !! :furax:
14/05/2007, 17h37
destructive
j'ai trouvé la solution les amis ! :yaisse2:
pour s'assurer que la case sera décochée par défaut après chaque load je lui ai affecté un id "cacher" et j'ai écrit cette fonction :
Code:

1 2 3 4 function refrech(){ var check = document.getElementById("cacher"); check.checked=false; }
puis j'ajoute ceci dans la définition du body :

Code:

<body onload="refrech();">

bien sûr si plusieurs cases sont à manipuler on peut leur affecter une classe commune ("cochée" p.ex) et la fonction va les identifier par cette classe pour les manipuler tous à la fois !:lol:
merci pour vous tous !! :chin: