[DOM] un tableau de checkbox

**namstou3** · 03/10/2007, 18h09

salut,

je veux q'une fois je coche un checkbox, toute la ligne de checkbox prend une couleur, �a veux dire que tous le td o� se trouve ce checkbox prend une couleur diff�rente..

Merci

**SpaceFrog** · 03/10/2007, 18h32

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

onmouseup="this.parentNode.parentNode.style.backgroundColor=(this.checked)?'red':'white';"

**namstou3** · 03/10/2007, 18h42

S'il vous j'aimerai quelque chose de plus sinificative

Merci d'avance

**javatwister** · 03/10/2007, 19h12

oui c'est vrai t'abuses, l�!

**SpaceFrog** · 03/10/2007, 19h14

Pfff ... ils ne font vraiment plus aucun effort

Bon je suis de bonne humeur et voil� ce que �a peut donner :

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
<script type='text/javascript'>
 
function highlightLine(obj){
 
 setTimeout(function(){ if(obj.parentNode.parentNode.colored==undefined){obj.parentNode.parentNode.colored=0;}
 							obj.parentNode.parentNode.colored+=(obj.checked)?1:-1;
 							if (obj.parentNode.parentNode.colored==0){obj.parentNode.parentNode.style.backgroundColor='white';
                                            return true;} 
                        else{obj.parentNode.parentNode.style.backgroundColor=((obj.checked=='false')&&(obj.backgroundColor!='red'))?'white':'red';}
                        	}
                        	,100)
	}
	</script>
</head>
 
<body>
 
<table border="1" width="100%">
  <tr>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="12%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
  </tr>
  <tr>
    <tr>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="12%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
  </tr>
  </tr>
  <tr>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="12%">&nbsp;</td>
  </tr>
</table>
 
</body>
 
</html>

arf juste un detail � regler si click trop rapides ...
en fait on doit pouvoir virer le setTimeout

**namstou3** · 03/10/2007, 19h43

Merci bcp SpaceFrog, au fait je ne voulais pas tout le code, juste des petites explications parce que DOM c'est pas mon point fort!!

Merci, esp�rant que tu resteras tjrs en bonne humeur.

**SpaceFrog** · 03/10/2007, 20h24

Bon voil� le souci des doubles et triples et multiclicks r�solu :

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
<script type='text/javascript'>
var clicked=false;
function highlightLine(obj){
 if(clicked){return true;}
 clicked=true;
 if(obj.parentNode.parentNode.colored==undefined){obj.parentNode.parentNode.colored=0;}
 obj.parentNode.parentNode.colored+=(obj.checked)?1:-1;
 if (obj.parentNode.parentNode.colored==0){obj.parentNode.parentNode.style.backgroundColor='white';
                                           clicked=false;
                                            return true;} 
 else{obj.parentNode.parentNode.style.backgroundColor=((obj.checked=='false')&&(obj.backgroundColor!='red'))?'white':'red';}
 clicked=false;
                        	}
 
	</script>
</head>
 
<body>
 
<table border="1" width="100%">
  <tr>
    <td width="11%"><input type="checkbox" onmousedown="highlightLine(this)" ondblclick='return false;'></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)" ondblclick='return false;'></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)" ondblclick='return false;'></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)" ondblclick='return false;'></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="12%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
  </tr>
  <tr>
    <tr>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="11%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
    <td width="12%"><input type="checkbox" onmouseup="highlightLine(this)"></td>
  </tr>
  </tr>
  <tr>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="11%">&nbsp;</td>
    <td width="12%">&nbsp;</td>
  </tr>
</table>

[DOM] un tableau de checkbox

JavaScript

Vue hybride

Discussions similaires

Partager

Partager