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+

this.checked

JavaScript

Vue hybride

Discussions similaires

Partager

Partager