[DOM] un tableau de checkbox

Version imprimable

03/10/2007, 18h09
namstou3

[DOM] un tableau de checkbox

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
03/10/2007, 18h32
SpaceFrog

Code:

onmouseup="this.parentNode.parentNode.style.backgroundColor=(this.checked)?'red':'white';"
03/10/2007, 18h42
namstou3

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

Merci d'avance
03/10/2007, 19h12
javatwister

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

Pfff ... ils ne font vraiment plus aucun effort :roll:

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

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

03/10/2007, 19h43
namstou3

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

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

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

Voici mon bout de 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
<script type='text/javascript'>
function highlightLine(obj)
{
		var number=0;
		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=='true')&&(obj.backgroundColor!='#CCCCCC'))?'white':'#CCCCCC';	}
		//alert (obj.checked);
		for (var i=0; i<obj.parentNode.parentNode.length; i++) 
		{if(obj.parentNode.parentNode.checked==true)
			alert('ok');
		}
 
 
}
 
</script>
<style type="text/css">
<!--
.Style1 {font-family: "Book Antiqua";font-size: 12px;}
-->
</style>
</head>
 
<body>
 
<table border="1" cellpadding="0" cellspacing="0" width="47%">
  	<tr>
  		<td width="11%">
        	<input type="checkbox" id="c1" onclick="highlightLine(this)">
  			<label for="c1"><span class="Style1">Vous avez reçu un nouveau message</span></label>
        </td>
  	</tr>
 	<tr>
	  	<td width="11%">
        	<input type="checkbox" id="c2" onclick="highlightLine(this)">
	    	<label for="c2"><span class="Style1">Vous avez reçu un autre nouveau message</span></label>
        </td>
  	</tr>
    <tr>
   		<td width="11%">
        	<input type="checkbox" id="c3" onclick="highlightLine(this)">
   			<label for="c3"><span class="Style1">Vous avez reçu un avant dernier nouveau message</span></label>
        </td>
  	</tr>
    <tr>
   		<td width="11%">
        	<input type="checkbox" id="c4" onclick="highlightLine(this)">
   			<label for="c4"><span class="Style1">Vous avez reçu un dernier nouveau message</span></label>
        </td>
  	</tr>
</table>

ça marche parfaitement mais j'avais pas prévue la possiblité de choisir plusieurs ligne en appuyant sur SHIFT + bouton HAUT ou BAS..

Avez-vous une idée comment je pourrai effectuer ça??

Merci