[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