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

**namstou3** · 04/10/2007, 15h06

Voici mon bout de code:

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

[DOM] un tableau de checkbox

JavaScript

Discussions similaires

Partager

Partager