[DOM] Evenement : colorier des cases construite avec DOM

**identifiant_bidon** · 19/02/2008, 17h22

Bonjour

(Voici un code qui dira qq chose a SpaceFrog)

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
<html>
<head>
<style>
.case_mois{
  border: 2px solid #4575b8;
  border-collapse:collapse;
  text-align:center;
  font-size:8pt;
  width:20px;
 }
</style>
<script>
    function start() {
		jour_mois = new Array("D","L","M","M","J","V","S","D","L","M","M","J","V","S","D","L","M","M","J","V","S","D","L","M","M","J","V","S");
 
		var row = document.createElement("tr");
 
		for (var i = 1; i <= 28; i++) {
				cell = document.createElement("td");
 
			cell.innerHTML=jour_mois[i-1];
			cell.className = "case_mois";	
			row.appendChild(cell);
		 }
 
		document.getElementById('innerTable').getElementsByTagName('tbody')[0].appendChild(row);
		document.getElementById('id_du_tbody').style.width="100%";	
    }
</script>
</head>
<body onload="start()">
<table  height="323" border="1" cellpadding="0" cellspacing="0" >
  <tr>
    <td style='cursor:pointer;' onclick=""><center>cliquer dans cette case</center></td>
  </tr>
  <tr>
    <td ><table id="innerTable" cellpadding="0" cellspacing="0" width="560px"><tbody id="id_du_tbody"></tbody></table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

J'ai un tableau construit côté navigateur via DOM, je voudrais pouvoir faire en sorte qu'en cliquant sur la case (la ou se trouve le texte "cliquer dans cette case"), toutes les cases construites soient coloriées en vert

Merci

**SpaceFrog** · 19/02/2008, 17h41

il suffirait juste de donner un id au tr créé dynamiquement et puis:

Code :

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

1
2
3
4
5
var TabNewTds=document.getElementById('trdyn').getElementsByTagName('td');
var TL=TabNewTds.length
for(i=0;i<TL;i++){
     TabNewTds[i].style.backgroundColor='blue';
}

**identifiant_bidon** · 20/02/2008, 12h21

Merci SPaceFrog, ca marche nickel.

Mais je voudrais faire encore une dernière petite chose. Si qq'un a une idée, c'est relativement complexe.

Je ne veux plus me servir du bouton pour colorier mes cases. Maintenant je voudrais les colorier en passant la souris sur mes cases (le bouton de la souris étant enfoncé). lorsque le bouton de la souris n'est plus enfoncé, le mouseover ne colorie plus les cases quand on passe dessus. Et quand on refait un mousedown, le mouseover recolorie mes cases

J'espère avoir été assez clair

Merci

**identifiant_bidon** · 20/02/2008, 14h08

En fait, pour etre plus précis. Je voudrais reproduire le comportement d'un mouseover mais avec bouton de souris enfoncé.

Merci de votre aide. Je ne sais pas trop quelle astuce trouver.

**SpaceFrog** · 20/02/2008, 14h32

oulà ça va être tricky aprcequ'il va falloir chopper le onmousedown sur tous les objets de la page ...

le principe :

sur le onmousedown tu mets un flag à true

et sur le onmouseup tu le mets à false

et dans ta fonction de coloriage:

Code :

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