appel sur tous éléments commençant par

Version imprimable

Voir 40 message(s) de cette discussion en une page

03/04/2007, 10h30
franfr57

appel sur tous éléments commençant par
BOnjour, je voudrais faire une action js sur tous les élément de ma page comment par desc comment puis je faire?

l'action que je fait est :
Code:

1 2 document.getElementById("desc5").style.display="none";
Merci pour votre aide

bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var i, objet;
var n = 20;
 
 
for (i=0; i<n; i++)
{
    objet = document.getElementById("desc"+i);
    if (objet!=null)
   {
          objet.style.display="none";
   }
}

:question:

03/04/2007, 12h03
franfr57

Non cela ne va pas car les objets sont en nombre non définis et les nombres ne se suivent pas...
En clair il y a un nb quelquonque...

Merci pour votre aide
03/04/2007, 12h12
Auteur

augmente la valeur de n (n=500 par exemple voire plus, mais ça ralentira le script :? ).

De toutes façons le

Code:

if (objet!=null)

permet de vérifier l'existence ou non de l'objet pour éviter un plantage du script, donc si les numéros ne suivent pas, ce n'est pas grâve.

Code:

En clair il y a un nb quelquonque...

Il n'y a pas moyen d'éviter une génération "aléatoire" de cette valeur ?

Si tu as un code comme ça :

Code:

1
2
3
4
5
6
7
<div id="truc">
   <div id="desc0"></div>
   <div id="desc1"></div>
   <div id="desc2"></div>
   <div id="desc3"></div>
   ...
</div>

tu fais :

Code:

1
2
3
4
5
6
7
var n = document.getElementById('truc').getElementsByTagName('div').length;
 
for(var i = 0; i < n; i++){
   if(document.getElementById('desc'+i)){
      document.getElementById('desc'+i).style.display = 'none';
   }
}

03/04/2007, 16h12
franfr57

les nombres ne se suivent pas....
03/04/2007, 16h14
Bisûnûrs

Il serait p'tet bien de le préciser, on ne peut pas deviner la structure de ton code.
03/04/2007, 16h39
franfr57

En fait je récupère les nombres dans une base de données et si l'utilisateur supprime les nombres entre deux nombres, les nombres ne se suivent pas
03/04/2007, 16h45
haltabush
Citation:

Envoyé par Bisûnûrs

Il serait p'tet bien de le préciser, on ne peut pas deviner la structure de ton code.

Ca serait p'tet bien de lire ;) Il l'a écrit dans son 2ème message.
En fait, ce qu'il faudrait, c'est pouvoir utiliser une regExp ici, mais bon je ne vois pas comment...
Si possible, passe par le serveur pour la boucle
exemple en php :
Code:

1 2 3 4 5 6 <?php while(false!==($items=mysql_fetch_row($dbRes))){ echo 'document.getElementById("desc'.$items[0].'").style.display = "none";'; } ?>
03/04/2007, 16h46
Bisûnûrs

Dans ce cas tu peux essayer de récupérer l'id du dernier div desc, si par exemple c'est 5 et qu'il manque le 3, on peut faire une boucle de 0 à 5 sans problème avec le code que j'ai mis au-dessus.

Pour récupérer le dernier id :

Code:

var n = document.getElementById('truc').getElementsByTagName('div')[document.getElementById('truc').getElementsByTagName('div').length-1].id.substring(5,7);

Fais un alert de n au cas où .. Mon substring peut être faux.
03/04/2007, 16h49
haltabush

<troll>Pas bête du tout ça! Je n'y aurais pas pensé.</troll>

j'obtient l'erreur :
document.getElementById(...) à la valeur NULL

De plus je ne comprend pas trop ton code...

Qu ça soit :
Code:

1 2 3 4 var n = document.getElementById('desc').getElementsByTagName('div').length; ou var n = document.getElementById('desc').getElementsByTagName('div')[document.getElementById('desc').getElementsByTagName('div').length-1].id.substring(5,7);
Merci pour votre aide

03/04/2007, 18h02
Bisûnûrs
Dans le premier cas, je récupère le nombre de div dans ton div desc.

Si tu avais eu 5 div de 0 à 4, n aurait valu 5.

Dans le second, étant donné que getElementsByTagName renvoie un tableau, on récupère le dernier élément de ce tableau, soit la longeur du tableau-1 vu que l'indice commence à 0. Et de ce dernier élément, on récupère la sous-chaine à partir du caractère 4 de l'id.

Enfin, ça c'est en théorie.

En gros, j'ai essayé de tout faire d'un coup, on peut procéder par étapes :
Code:

1 2 3 var longeur_tableau = document.getElementById('desc').getElementsByTagName('div').length; var n = document.getElementById('desc').getElementsByTagName('div')[longueur_tableau-1].id.substring(4);
Dans mon code précédent, c'était bien le substring qui était faux, remplace-le par celui ci-dessus.
03/04/2007, 18h19
javatwister
- crée un tableau javascript vide;

Code:

var tableau=[];

- insère la boucle php dans des balises de script
- dans cette boucle, envoie l'indice dans un tableau javascript créé auparavant;
...

Code:

echo 'tableau.push('.$variable[0].');';

...
(système de quotes à tester);

après, pour parcourir les éléments, tu n'as plus qu'à faire:
Code:

1 2 3 for( element in tableau){ document.getElementById("desc"+tableau[element]).[instruction] }
03/04/2007, 19h22
franfr57

ton substring était peut être faut mais j'ai toujours la même erreur :
document.getElementById(...) à la valeur NULL

je suis en ASP...
03/04/2007, 19h29
Bisûnûrs
Je viens de faire un test chez moi, ça fonctionne très bien.

Tu devrais installer un vrai navigateur, comme Firefox et sa Web Developer Toolbar pour voir quel est le problème Javascript, sur IE6 ça ne veut rien dire.

Sinon, mon code admet le fait que ta structure soit :
Code:

1 2 3 4 5 6 7 <div id="desc"> <div id="desc0"></div> <div id="desc2"></div> <div id="desc3"></div> <div id="desc4"></div> ... </div>
par exemple ..

mon code est :

Code:

1
2
3
4
5
 
<div id="desc0"></div>
   <div id="desc2"></div>
   <div id="desc3"></div>
   <div id="desc4"></div>

il n'y a pas de :

Code:

1
2
 
<div id="desc">

03/04/2007, 20h50
Bisûnûrs

Et quelle est la balise qui englobe tous ces div ?

en fait le code de ma page autour de ces div est :

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
 
			<table width="90%" border="1" align="center" cellpadding="1" cellspacing="0" bordercolor="#660000">
				<tr>
					<td>Rang</td>
					<td>Nom</td>
					<td>Description</td>
					<td colspan="2">Edition</td>
				</tr>
				<form name="maj" method="post" action="valide_maj.asp" onsubmit="return(check(this));">
 
				<tr>
					<td>1</td>
					<td><input type="text" name="nom1" value="test" /></td>
					<td><img src="../images/003.gif" border="0" onclick="ouvrir('1');" />
					<div id="desc1" style="position:absolute;width:460px;height:105px;display:none;background-color:#FFFFFF">
					description  :<br \><br \>
					<textarea name="description" cols="50" rows="4">Ceci est un testhy</textarea>
					</div>
					</td>
					<td><a href="suppression/default.asp"><img src="../images/002.gif" border="0" /></td>
					<td><img src="../images/001.png" border="0" onclick="confirmer('1','test');" /></td>
				</tr>
 
				<tr>
					<td>16</td>
					<td><input type="text" name="nom16" value="hgg" /></td>
					<td><img src="../images/003.gif" border="0" onclick="ouvrir('16');" />
					<div id="desc16" style="position:absolute;width:460px;height:105px;display:none;background-color:#FFFFFF">
					description  :<br \><br \>
					<textarea name="description" cols="50" rows="4">hjh</textarea>
					</div>
					</td>
					<td><a href="suppression/default.asp"><img src="../images/002.gif" border="0" /></td>
					<td><img src="../images/001.png" border="0" onclick="confirmer('16','hgg');" /></td>
				</tr>
 
				<tr>
					<td>20</td>
					<td><input type="text" name="nom20" value="dff" /></td>
					<td><img src="../images/003.gif" border="0" onclick="ouvrir('20');" />
					<div id="desc20" style="position:absolute;width:460px;height:105px;display:none;background-color:#FFFFFF">
					description  :<br \><br \>
					<textarea name="description" cols="50" rows="4"></textarea>
					</div>
					</td>
					<td><a href="suppression/default.asp"><img src="../images/002.gif" border="0" /></td>
					<td><img src="../images/001.png" border="0" onclick="confirmer('20','dff');" /></td>
				</tr>
 
				<tr>
					<td>21</td>
					<td><input type="text" name="nom21" value="ts" /></td>
					<td><img src="../images/003.gif" border="0" onclick="ouvrir('21');" />
					<div id="desc21" style="position:absolute;width:460px;height:105px;display:none;background-color:#FFFFFF">
					description  :<br \><br \>
					<textarea name="description" cols="50" rows="4"></textarea>
					</div>
					</td>
					<td><a href="suppression/default.asp"><img src="../images/002.gif" border="0" /></td>
					<td><img src="../images/001.png" border="0" onclick="confirmer('21','ts');" /></td>
				</tr>
 
				<tr>
					<td>22</td>
					<td><input type="text" name="nom22" value="dss" /></td>
					<td><img src="../images/003.gif" border="0" onclick="ouvrir('22');" />
					<div id="desc22" style="position:absolute;width:460px;height:105px;display:none;background-color:#FFFFFF">
					description  :<br \><br \>
					<textarea name="description" cols="50" rows="4"></textarea>
					</div>
					</td>
					<td><a href="suppression/default.asp"><img src="../images/002.gif" border="0" /></td>
					<td><img src="../images/001.png" border="0" onclick="confirmer('22','dss');" /></td>
				</tr>
 
				<tr>
					<td>23</td>
					<td><input type="text" name="nom23" value="fl" /></td>
					<td><img src="../images/003.gif" border="0" onclick="ouvrir('23');" />
					<div id="desc23" style="position:absolute;width:460px;height:105px;display:none;background-color:#FFFFFF">
					description  :<br \><br \>
					<textarea name="description" cols="50" rows="4"></textarea>
					</div>
					</td>
					<td><a href="suppression/default.asp"><img src="../images/002.gif" border="0" /></td>
					<td><img src="../images/001.png" border="0" onclick="confirmer('23','fl');" /></td>
				</tr>
 
				<tr>
					<td>24</td>
					<td><input type="text" name="nom24" value="l" /></td>
					<td><img src="../images/003.gif" border="0" onclick="ouvrir('24');" />
					<div id="desc24" style="position:absolute;width:460px;height:105px;display:none;background-color:#FFFFFF">
					description  :<br \><br \>
					<textarea name="description" cols="50" rows="4"></textarea>
					</div>
					</td>
					<td><a href="suppression/default.asp"><img src="../images/002.gif" border="0" /></td>
					<td><img src="../images/001.png" border="0" onclick="confirmer('24','l');" /></td>
				</tr>
 
			</table>

donc la balmise table je pense...
Ce qui est sur ce qu'il y a auttant de div ke de tr dans la page en fait pour savoir le nombre faudrait compte le nombre de tr?

T'es pas loin.

Je remarque juste que tu as une erreur de syntaxe dans ton code :
Ta balise form entre deux <tr> et n'est pas fermée avant la fin de <table>. Déplace cette balise form juste avant le <table> Et ça sera bon pour l'erreur de syntaxe.

Ensuite, donne un id à ton table, genre :

Code:

<table id="table_desc" width="90%" border="1" align="center" cellpadding="1" cellspacing="0" bordercolor="#660000">

Et après tu pourras faire :
Code:

1 2 3 var longeur_tableau = document.getElementById('table_desc').getElementsByTagName('div').length; var n = document.getElementById('table_desc').getElementsByTagName('div')[longueur_tableau-1].id.substring(4);
Comme ton nombre de div est égal au nombre de tr, ça revient donc au même, on aurait pu utiliser le nombre de tr au lieu du nombre de div.

Voir 40 message(s) de cette discussion en une page