Firefox et modification de style d'une ligne

Version imprimable

08/04/2008, 13h57
jojo57

Firefox et modification de style d'une ligne
Bonjour tout le monde, pour les besoins de mon projet, je doit faire apparaitre et disparaitre des lignes de mon tableau.
Je le fais de cette facon
Code:

1 2 3 document.getElementById('champ_cartereseau1').style.display="none" document.getElementById('champ_cartereseau2').style.display="block"
Sous I.E. aucun problème, sous Firefox j'ai un bug, au lieu d'avoir mon intitulé dans un td et la valeur dans un autre td, j'ai tout dans un seul td...

Par exemple sous i.e j'ai ca

TD-------------------------------TD
ip carte réseau------------ 195.162.35.14

mais sous Firefox j'ai ca

TD--------------------------------TD
ip carte réseau 195.162.35.14

Cela me le fait juste pour les TR que s'affiche et que je cache à l'aide de mon javascript...
08/04/2008, 14h18
le_chomeur

peux tu nous donner ta structure complète ? :)
ou un exemple sur plusieurs lignes

Bien sur, voici un exemple:

mon fichier .tpl (j'utilise smarty)

Code:

1
2
3
4
5
6
7
8
9
10
11
<tr class="td_titre" id="champ_ram" style='display:none'>
				<td><b>Informations sur la mémoire ram :</b></td>
			</tr>
			<tr class="tab" id="champ_ram1" style='display:none'>
				<td width="40%">Nombre de Mo :</td>
				<td width="60%"><input type="text" name="nbmo_ram" id="nbmo_ram" size="10"> Mo</td>
			</tr>
			<tr class="tab" id="champ_ram2" style='display:none'>
				<td width="40%">Fréquence :</td>
				<td width="60%"><input type="text" name="frequence_ram" id="frequence_ram" size="10"> Mhz</td>
			</tr>

et mon javascript pour afficher/masquer

Code:

1
2
3
4
5
else if(document.getElementById(liste).value == "106")
	{
		document.getElementById('champ_ram').style.display="block"
		document.getElementById('champ_ram1').style.display="block"
		document.getElementById('champ_ram2').style.display="block"

bonjour,
Code:

1 2 3 4 document.getElementById('champ_ram').style.display="block"; document.getElementById('champ_ram1').style.display="block"; document.getElementById('champ_ram2').style.display="block";
à la place de "block" ne mets rien.
Code:

1 2 3 4 document.getElementById('champ_ram').style.display=""; document.getElementById('champ_ram1').style.display=""; document.getElementById('champ_ram2').style.display="";
Les TR sont des balises table-row et non des balises block. Si tu ne précises pas la valeur du display, l'attribut prendra sa valeur par défaut.

Petite remarque en passant : prends l'habitude de terminer chaque instruction JS par un point virgule :)

08/04/2008, 15h11
le_chomeur

ajoute également un

colspan sur ta première td :)

Citation:

Envoyé par le_chomeur

ajoute également un colspan sur ta première td :)

ah oui, bien vu :king:
Code:

1 2 3 4 <tr class="td_titre" id="champ_ram" style='display:none'> <td colspan="2"><b>Informations sur la mémoire ram :</b></td> </tr>

08/04/2008, 15h22
jojo57

Oups j'ai oublié les points virgules partout...:oops: d'habitude je les mets toujours...

J'ai enlevé l'attribut block mais ca ne change rien, mon tableau est toujours déformé

bizare :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
function voir(){
	document.getElementById('champ_ram').style.display="block"
		document.getElementById('champ_ram1').style.display="block"
		document.getElementById('champ_ram2').style.display="block"
}
function masque(){
	//document.getElementById('champ_ram').style.display="none"
		document.getElementById('champ_ram1').style.display="none"
		//document.getElementById('champ_ram2').style.display="none"
}
</script>
</head>
 
<body>
<table border="1">
<tbody>
<tr class="td_titre" id="champ_ram" style='display:none' style="width:700px" bordercolor="#666666" >
				<td colspan="2"><b>Informations sur la mémoire ram :</b></td>
			</tr>
			<tr class="tab" id="champ_ram1" style='display:none'>
				<td width="40%">Nombre de Mo :</td>
				<td width="60%"><input type="text" name="nbmo_ram" id="nbmo_ram" size="10"> Mo</td>
			</tr>
			<tr class="tab" id="champ_ram2" style='display:none'>
				<td width="40%">Fréquence :</td>
				<td width="60%"><input type="text" name="frequence_ram" id="frequence_ram" size="10"> Mhz</td>
			</tr>
            </tbody>
</table>
<input type="button" onclick="masque()" value="masque" />
<input type="button" onclick="voir()" value="voir" />
</body>
</html>

ne me pose aucun soucis

08/04/2008, 15h41
jojo57

je ne sais vraiment pas de quoi cela peut provenir, j'ai un autre problème, peut être sont il liés...sur firefox quand je choisi dans ma liste disque dur, les infos du disque dur apparaissent et ensuite quand je chois par exemple carte mère bah les infos de la carte mère apparaissent mais avec un saut de plusieurs lignes.
Comme si les infos du disque dur étaient toujours présentes mais pas visible...
08/04/2008, 18h29
le_chomeur

heu la ça peut venir de plein de choses .... surtout en asp.net ;)
essaye de regarder la source généré après ta sélection pour voir les éléments parasites
08/04/2008, 21h02
jojo57

euh je développe pas en asp mais en php.

Bonne idée je vais aller voir le code généré et je vous tient au courant

mon code généré est correcte, cependant à l'écran non....

voici mon code généré

Code:

1
2
3
4
5
6
7
8
<tr class="tab"  id="champ_choixmodele" style='display:none'>
				<td width="40%">Modéle :</td>
				<td width="60%"><select name="choixmodele_materiel" id="choixmodele_materiel" onchange="go();fcsite(this.form,this.form.site_materiel);fcetage(this.form,this.form.etage_materiel);fcservice(this.form,this.form.service_materiel);">
							<option value="0">Aucun</option>
						</select>
				</td>
 
			</tr>

09/04/2008, 15h48
le_chomeur

et donc que ce passe t-il avec cette ligne ?
au passage met des double quote sur le style="display:none" ;)

bah cette ligne ne saffiche pas correctement,

dans mon code source jai ca

Code:

1
2
3
4
5
6
7
8
<tr class="tab"  id="champ_choixmodele" style='display:none'>
				<td width="40%">Modéle :</td>
				<td width="60%"><select name="choixmodele_materiel" id="choixmodele_materiel" onchange="go();fcsite(this.form,this.form.site_materiel);fcetage(this.form,this.form.etage_materiel);fcservice(this.form,this.form.service_materiel);">
							<option value="0">Aucun</option>
						</select>
				</td>
 
			</tr>

Mais en réalité ce que je vois sur ma page si je te transforme ca en code ca donnerai :

Code:

1
2
3
4
5
6
7
<tr class="tab"  id="champ_choixmodele" style='display:none'>
				<td width="40%">Modéle : <select name="choixmodele_materiel" id="choixmodele_materiel" onchange="go();fcsite(this.form,this.form.site_materiel);fcetage(this.form,this.form.etage_materiel);fcservice(this.form,this.form.service_materiel);">
							<option value="0">Aucun</option>
						</select></td>
				<td width="60%"></td>
 
			</tr>

09/04/2008, 16h50
jojo57

Problème résolu grâce à Auteur, j'avais oublié un "block" dans une des mes fonctions, c'est pour cela que mon tableau était détruit...

Merci pour votre aide :yaisse2: