Comment masquer plusieurs cellules à la fois

**yann0807** · 17/09/2009, 09h33

Bonjour à toutes et à tous!
Voila je viens vous exposer mon problème assez particulier. Je dois réaliser une page qui permet en outre de selectionner un nombre entre 1 et 6 et de voir l'image correspondante à une armoire se modifier (la ok) mais aussi le tableau concernant cette armoire. En effet, si je sélectionne 5 le tableau possédera 5 colonnes, 4 il possédera 4 colonnes ...
Bref, avec jQuery j'avais très bien réussi mais que sous firefox;

Je faisais comme ceci:

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
 
			/* On convertit en integer puis on va appliquer le nouveau style */
		number = parseInt(number);
		var cpt = number + 1 ;
		for(var i = cpt ; i<7 ; i++)
		{
			var id = 'c'+i;
			var objet = document.getElementById(id);
			$(objet).hide();
		}
 
		for(var i = cpt ; i<7 ; i++)
		{
			var objet = document.getElementsByName(i);
			$(objet).hide();
 
		}

Je modifiais donc les "entêtes" du nom de C1, C2, ... puis je masquais toutes les cellules dont le nom était 1,2 ou 3 ...
Bref, sous IE cela ne fonctionnait pas car j'ai l'impression que cela l'embête qu'il y ait un nœud enfant dans la cellule (en l'occurrence un input radio)
Voici un bout de mon code HTMl:

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
45
46
47
48
49
50
 
<td class="td_9" name="c1" id="c1">	
	C1
</td>	
<td class="td_10" name="c2" id="c2">	
        C2
</td>	
<td class="td_10" name="c3" id="c3">	
	C3
</td>	
<td class="td_10" name="c4" id="c4">	
	C4
</td>	
<td class="td_10" name="c5" id="c5">	
	C5
</td>	
<td class="td_10" name="c6" id="c6">	
	C6									</td>												
</tr>
<tr>
<td class="td_9" rowspan="8" style="width:90px;">										      <b>Largeur des cellules</b>
</td>
<td class="td_4" style="width:150px;">	
	300
</td>
<td class="td_1" name="1">
          <INPUT TYPE="radio" NAME="largeur_cellule_c1" class="required" ID="largeur_cellule_c1_1" value="300" />
</td>
<td class="td_5" name="2">
												   <INPUT TYPE="radio" NAME="largeur_cellule_c2"  ID="largeur_cellule_c2_1"  value="300" />
 
</td>
<td class="td_5" name="3">
												<INPUT TYPE="radio" NAME="largeur_cellule_c3"  ID="largeur_cellule_c3_1" value="300" />
 
</td>
<td class="td_5" name="4">
												<INPUT TYPE="radio" NAME="largeur_cellule_c4"  ID="largeur_cellule_c4_1" value="300" />
 
</td>
<td class="td_5" name="5">
												<INPUT TYPE="radio" NAME="largeur_cellule_c5"  ID="largeur_cellule_c5_1" value="300" />
 
</td>
 
<td class="td_5" name="6">
												<INPUT TYPE="radio" NAME="largeur_cellule_c6"  ID="6_1" value="300" />
											</td>											
 
</tr>

En plus, il faut remarquer que le document.getElementsByName n'est pas très fonctionnel sous IE. Helas, je suis bien obligé de leur donner le même nom car il s'agit d'agir sur une vingtaine de lignes et oui!! Donc utilisation d'ID impossible!! J'ai également bien pensé à donner a mes input le même nom la ça fonctionne mais apré impossible de traiter correctement le formulaire.
Bref auriez-vous une idée pour que je puisse cacher ses *** de colonnes sous IE? Peut-être une piste pour récupérer les enfants, les masquer puis les parents?

Merci d'avance pour votre aide!!!

Edit: Je precise que le test sur une cellule avec un objet = document.getElementById(id) puis $(objet).hide() fonctionne sous IE.
C'est fou quand même ça marche sur l'id mais pas sur le nom!!

**Bovino** · 17/09/2009, 11h57

Salut,
Puisque tu codes avec jQuery, pourquoi n'utilises-tu pas ses sélecteurs ?
Plutôt que de donner des name identiques, affecte plutôt une classe et tu récupères tes éléments avec :

Code :

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