[DOM] Evenement : colorier des cases construite avec DOM

Version imprimable

Bonjour

(Voici un code qui dira qq chose a SpaceFrog)

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

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

Code:

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';
}

20/02/2008, 12h21
identifiant_bidon

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
20/02/2008, 14h08
identifiant_bidon

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.
20/02/2008, 14h32
SpaceFrog
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:

1 2 3 if (flag){ le coloriage}
donc si la souris n'est pas enfoncée ton flag sera à false et le coloriage ne se fera pas
20/02/2008, 15h03
identifiant_bidon

Merci SpaceFrog, j'ai utilisé ta méthode. C'était pas bien compliqué en fait ... :D