Remplir un tableau avec mousedown, mouseover, mouseup

**lumfast** · 29/02/2016, 11h54

Bonjour,

J'ai créer un tableau que je doit remplir de deux manière.

Premièrement lorsqu'on clic sur l'une des cellules.
deuxièmement quand on clic et passe au dessus des cellules.

J'ai réussis la première méthode mais je bloque sur la deuxième.
Je veux que lorsque je clic sur une cellule avec mousedown ma variable passe à true et appliquer le mouseover que pendant que ma variable est à true. Puis repasser ma variable à false avec le mouseup.

Le

Code :

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

function(elem , superCouleur) {this.style.backgroundColor = document.getElementById('tbl').style.backgroundColor;}

corréspond à la valeur du background de ma couleur que je selectionne dans mon tableau.

Code html :

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="fr" dir="ltr" bgcolor="#CED0CF"> 
 
  <head>                       
    <meta charset="UTF-8" />  
	<link rel="stylesheet" type="text/css" href="css.css" />	
    <title> Projet web avancé </title>    
	<link rel="icon" type="image/png" href="icone.png" />
	<script type="text/javascript" src="js.js" ></script>
  </head>  
 
<h1> <center><strong>Dessine moi un POST'IT </strong></center></h1>
 
<body id="body" bgcolor="#CCCCCC">
 
<form action="" method="post">
		<fieldset>
			<legend>Dimenssions de votre grille</legend>
			<label>Nombre de colonnes (1 à 40) : <input type="number" id="largeur" name="largeur" value="0" min="1" max="40" step="1" /></label><br />
			<label>Nombre de lignes (1 à 40) : <input type="number" id="hauteur" name="hauteur" value="0" min="1" max="40" step="1" /></label><br />
			<a> remise a zéro des dimenssions de votre grille :<input type="submit" value="valider" /></input></a>
		</fieldset>
</form>
 
 
 
<fieldset id="fcouleur">	
 
	<legend> Choisissez votre couleur  </legend> 
		<table class="tab" name="tab" id="tab">
			<tr>
				<td onclick='recup("chartreuse")' bgcolor="chartreuse" id="vert"></td>
				<td onclick='recup("#5CA4EC")'    bgcolor="#5CA4EC"    id="bleu"></td>
				<td onclick='recup("#ED4152")'    bgcolor="#ED4152"    id="rouge" ></td>
 
				<td onclick='recup("#F9EE5E")'  bgcolor="#F9EE5E" id="jaune" ></td>
				<td onclick='recup("pink")'  	bgcolor="pink"    id="rose" ></td>
				<td onclick='recup("orange")'   bgcolor="orange"  id="orange" ></td>
 
				<td onclick='recup("#D436DF")'	bgcolor="#D436DF" id="violet" ></td>
				<td onclick='recup("grey")'   	bgcolor="grey" 	  id="gris" ></td>
				<td onclick='recup("black")'  	bgcolor="black"   id="noir" ></td>
			</tr>
		</table>	
 
		<p><center> <strong> Double cliquez sur la cellules pour effacer la couleur </p>
 
</fieldset> 
 
 
<fieldset id="fchoix">
	<legend> Vous avez choisis </legend>
 
 
		<!-- Recupération de la couleur cliquer dans le tableau -->
		<table id="tbl" align="center">
			<tr>
				<td onclick='recup(this)'></td>
			</tr>
		</table>
 
 
		<script>
                        // Fonction récuperant l'élément du tableau 
                        function recup(elm){
                                document.getElementById('tbl').style.backgroundColor=elm;
                        }
                        
                        var couleur = document.getElementById('tbl').style.backgroundColor;
                </script>
</fieldset>
 
 
<a>
<input type="button" id="but" value="réinitialiser la grille" onclick='reset("tableContainer")'></input>
	<div id="tableContainer"> </div>
 
 
<script>
 
// fonction pour réinitialiser la grille 
function reset(elm){
madiv = document.getElementById("tableContainer");      
mesCellules = madiv.getElementsByTagName("td");
var unetd;
 
for ( i=0 ;  i<mesCellules.length ; i++){
        unetd= mesCellules[i]
 
        if (unetd.style.backgroundColor!=''){
                unetd.style.backgroundColor = '#CCCCCC';
                }
        else {
                unetd.style.backgroundColor= '#CCCCCC';
                }
        }
}
 
</script>		
</a>
 
 
 
 
 
<script>
 
        (function(){
                function createTable(){
                        var table,tbody,row,cell,tr,td;
 
                        table=document.createElement('table');
                        tbody=document.createElement('tbody');
 
                        for(row=0;row<heightID.value;row++){       // pour les colonnes de 0 à  la valeur rentrer dans la liste
                                tr=document.createElement('tr');     //création du tr
                                for(cell=0;cell<widthID.value;cell++){       //pour les ligne de 0 à  la valeur rentrer dans la liste
                                        td=document.createElement('td');     //création d'un td 
                                        
                                
                    td.addEventListener('click',     function(elem , superCouleur) {this.style.backgroundColor = document.getElementById('tbl').style.backgroundColor;})
                                        td.addEventListener('dblclick',  function(elem , superCouleur) {this.style.backgroundColor = "#CCCCCC";})
                                        
                                
                tr.appendChild(td);       //ajout du td dans les tr pour créer le tableau avec
                                }
                                tbody.appendChild(tr);         // ajout des tr dans une variable tbody
                        }                       
                        
                        table.appendChild(tbody);     // ajout du tbody dans mon tableau créée
 
 
                        while(containerID.lastChild)containerID.removeChild(containerID.lastChild);
                        containerID.appendChild(table);
                        return !1;
                }
 
                var     widthID=document.getElementById('largeur'),
                        heightID=document.getElementById('hauteur'),
                        containerID=document.getElementById('tableContainer');
 
                widthID.onclick=createTable;      // modification de la grille a chaque changement de variables
                heightID.onclick=createTable;     
 
                createTable();    // création de la table
                
        })();
        
        
        td.addEventListener('click', function() {supercolor_postit(this,superCouleur); })
        var supercolor_postit = function (elem, superCouleur) {
    
    superCouleur = document.getElementById('tbl').style.backgroundColor;
 
    
    if (elem.style.backgroundColor == '')
    {        
        elem.style.backgroundColor = superCouleur;
    }
    else
    {
    alert("Impossible de changer la couleur")
    }
 
}
</script>

Et le code que j'ai essayé de faire

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
 
<script>
var md = false ;
 
function onmousedown (){
	td.event.mousedown;
	md=true;	
}
 
function onmouseup () {
	td.event.mouseup;
	md = false;
}
 
function whenmousedown(){
	if ( md = true ){
		td.addEventListener( 'mouseover' , function(elem , superCouleur) {this.style.backgroundColor = document.getElementById('tbl').style.backgroundColor;}));
	}
}
</script>
</body>
</html>

je sais pas trop comment faire appel à l’évènement mouse.
Si quelqu'un a une petite idée car j'ai essayé plusieurs méthodes mais elles ne marche pas.

Merci d'avance à vous.

**NoSmoking** · 29/02/2016, 18h58

Bonjour,
jette un cou d'oeil à cette discussion Jeux du post it

**lumfast** · 29/02/2016, 19h21

je jette un oeil dessus.

merci à toi pour ton aiguillage.

**lumfast** · 02/03/2016, 11h46

J'ai finalement réussis à faire quelque chose qui marche pas trop mal

je le post si ca peut aider certaines personnes.

dans la deuxième boucle for de mon tableau :

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
var md = false ;
                    td.addEventListener('mousedown', function() {md = true;    //si le mousedown est activé alors la variables md passe à true
                    this.style.backgroundColor = document.getElementById('tbl').style.backgroundColor;      // affectation de la couleur à la cellule
 
					})
 
                    td.addEventListener('mouseover',  function() {
 
                                                    if(md == true)       // le temps que dousedown est actif alors on applique la fonction mouseover
                                                    {
                            this.style.backgroundColor = document.getElementById('tbl').style.backgroundColor;
 
                                                    }
                                        })
                    td.addEventListener('mouseup',  function() {md = false })     // lorsqu'on lache le clic alors la variable repasse à false

Remplir un tableau avec mousedown, mouseover, mouseup

JavaScript

Discussions similaires

Partager

Partager