Discussion :

[Alain G]

Je suis non seulement nouveau dans ce forum, mais aussi un vrai débutant qui je l'avoue ne comprends pas grand chose en Javascript.
J'ai trouvé sur la toile un petit script qui me permet de sélectionner les rows d'une table:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <SCRIPT LANGUAGE="JavaScript">
<!--
function toggleCells(el){
var tr=document.getElementsByTagName('tr');
for (i = 0; i < tr.length; i++)
    <!--Si on reclique dessus
    if (tr[i].style.backgroundColor=='white')
    <!-- Si on clique sur un autre il devient
    tr[i].style.backgroundColor='blue'
    <!--Si on clique dessus
    el.style.backgroundColor='white'    
}
// -->
</script>

Je souhaiterai que quand on reclique sur une rangée déjà sélectionnée précédemment (et donc de couleur bleue) le background change en transparent et qu'il reste transparent quand on clique sur une autre rangée.

Je ne sais pas si je suis très clair, mais en gros j'essaye de mimer la sélection d'une rangée en Mysql.

Merci d'avance pour votre aide

[highman]

Et avec des checkbox ca te tente pas ? comme dans phpMyAdmin ...

En gros sur l'evenement onclick sur la checkbox tu verifie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
if(chk.checked == true){
    chk.parentNode.parentNode.style.backgroundColor = "blue";
}
else{
    chk.parentNode.parentNode.style.backgroundColor = "transparent";
}

Le plus facile à mon gout serait de créer ton tableau avec le DOM et de mettre toutes les lignes dans un Array javascript, ainsi tu pourras facilement gerer les styles (par exemple quand tu clique sur une ligne, toutes les autres se mettent d'abord en transparent, puis celle cliquée en bleue).

J'espere avoir été un peu clair, cas un peu trop de vin a midi

[Alain G]

J'avoue que ta soltion me plairait beaucoup highman, mais si possible, il va alloir me prendre par la main pour l'implémenter.

Le plus facile à mon gout serait de créer ton tableau avec le DOM et de mettre toutes les lignes dans un Array javascript, ainsi tu pourras facilement gerer les styles (par exemple quand tu clique sur une ligne, toutes les autres se mettent d'abord en transparent, puis celle cliquée en bleue).

Bon ça je n'ai pas compris et celà n'a rien à voir avec ta consommation d'un liquide alcoolisé

Pour le moment voilà ce que j'ai fait (et qui ne marche pas )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<form><input type = 'checkbox'  name='couleur' value = 'unchecked' 
onClick='javascript:couleur()'></form>

et la fonction qui reprends exactement ce que tu écris précédemment:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
if(chk.checked == true){
    chk.parentNode.parentNode.style.backgroundColor = "blue";
}
else{
    chk.parentNode.parentNode.style.backgroundColor = "transparent";
}

Merci pour votre patience et si possible pour votre aide.

[gKsam]

J'avais déjà fait quelque chose de similaire pour tester le fonctionnement.

Voilà, en explications ce que j'avais fait.

Tout d'abord, quand tu cliques sur un ligne. En fait tu cliques sur une cellule. Donc toutes tes cellules doivent avoir l'événement onclic du style onclic="changerCouleurLigne()"

Ensuite tout ce passe en script

Dans la fonction changerCouleurLigne(), Il faut :
0: récupérer la couleur de fond de ta cellule (comme ça tu connais l'état de ta ligne sélectionnée ou non)
1 : récupérer la ligne à laquelle appartient la cellule cliquée
2 : a partir de la ligne récupérée, récupérer le tableau
4 : parcourir tout le tableau ligne par ligne Pour chaque ligne, parcourir toutes les cellules. (deux boucles for ou do while imbriquées)
5 : dans la boucle interne (celle qui parcours toutes les cellules) changer la couleur de fond avec ta couleur de fond de base. (transparent)

normalement à ce stade toutes tes lignes (cellules) seront de la même couleurs. (transparent) rien de sélectionné.

Ensuite, il faut faire un seconde boucle qui parcours toutes les cellules de la ligne récupérer en 2:

dans cette boucle:
Si la couleur récupérer en 0: est différente de transparent (c'est quel était sélectionner) alors changer la couleur de fond de la cellule courante avec la couleur de sélection.

bon courage par ce que ce n'est pas trop algorithmique ce que j'ai tenté d'expliquer

[gKsam]

Après avoir regardé car je dois de toute façon faire quelque chose qui y ressemble.

Donc :

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
77
78
<html>
<head>
 
	<style type="text/css" media="screen">
 
		table {
 
			background-color: #EEEEEE;
		}
 
		table tr.ligne {
 
			background-color: transparent;
		}
 
		table tr th, table tr.ligne td {
 
			border: 1px solid black;
		}
	</style>
 
	<script type="text/javascript">
 
		function selectionnerLigne(ligne) {
 
		if (ligne.currentStyle) {
 
			couleurLigne = ligne.currentStyle['backgroundColor'];
 
		} else {
 
			couleurLigne = document.defaultView.getComputedStyle(ligne, null).getPropertyValue('background-color')
		}
 
			if (couleurLigne=='transparent') {
 
				ligne.style.backgroundColor = '#DDDDFF'
 
			} else {
 
				ligne.style.backgroundColor = 'transparent'
			}
		}
	</script>
 
</head>
 
<body>
 
<table>
	<tr>
		<th>colonne 1</th>
		<th>colonne 2</th>
		<th>colonne 3</th>
		<th>colonne 4</th>
	</tr>
	<tr class="ligne" onclick="selectionnerLigne(this)">
		<td>cellule 1.1</td>
		<td>cellule 1.2</td>
		<td>cellule 1.3</td>
		<td>cellule 1.4</td>
	</tr>
	<tr class="ligne" onclick="selectionnerLigne(this)">
		<td>cellule 2.1</td>
		<td>cellule 2.2</td>
		<td>cellule 2.3</td>
		<td>cellule 2.3</td>
	</tr>
	<tr class="ligne" onclick="selectionnerLigne(this)">
		<td>cellule 3.1</td>
		<td>cellule 3.2</td>
		<td>cellule 3.3</td>
		<td>cellule 3.4</td>
	</tr>
</table>
 
</body>
</html>

[Alain G]

Un grand merci à toi gKsam. J'avoue que j'étais encore entrain de chercher sur la toile car je n'arrivais pas à faire fonctionner les autres propositions
Maintenant tout est OK, grâce à toi. Très sympa, mais diantre que c'est compliqué Javascript ...

[gKsam]

ça me titillai du coups pendant la mi-temps.

En utilisant le className. Ce qui permet de faciliter la mise en forme des ligne sélectionnées ou déselectionnées.

Ce qui donne :

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
<html>
<head>
 
	<style type="text/css" media="screen">
 
		table {
 
			background-color: #EEEEEE;
		}
 
		table tr.ligneDeselectionnee {
 
			background-color: transparent;
		}
 
		table tr.ligneSelectionnee {
 
			background-color: #DDDDFF;
		}
 
		table tr th, table tr.ligne td {
 
			border: 1px solid black;
		}
	</style>
 
	<script type="text/javascript">
 
		function selectionnerLigne(ligne) {
 
			if (ligne.className=='ligneDeselectionnee') {
 
				ligne.className = 'ligneSelectionnee'
 
			} else {
 
				ligne.className = 'ligneDeselectionnee'
			}
		}
	</script>
 
</head>
 
<body>
 
<table>
	<tr>
		<th>colonne 1</th>
		<th>colonne 2</th>
		<th>colonne 3</th>
		<th>colonne 4</th>
	</tr>
	<tr class="ligneDeselectionnee" onclick="selectionnerLigne(this)">
		<td>cellule 1.1</td>
		<td>cellule 1.2</td>
		<td>cellule 1.3</td>
		<td>cellule 1.4</td>
	</tr>
	<tr class="ligneDeselectionnee" onclick="selectionnerLigne(this)">
		<td>cellule 2.1</td>
		<td>cellule 2.2</td>
		<td>cellule 2.3</td>
		<td>cellule 2.3</td>
	</tr>
	<tr class="ligneDeselectionnee" onclick="selectionnerLigne(this)">
		<td>cellule 3.1</td>
		<td>cellule 3.2</td>
		<td>cellule 3.3</td>
		<td>cellule 3.4</td>
	</tr>
</table>
 
</body>
</html>

mais diantre que c'est compliqué Javascript

S'il n'y avait que le javascript cela serait du gâteau. Le problème c'est plus javascript contre JScript.