Remplir un tableau avec mousedown, mouseover, mouseup
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:
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:
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:
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.
