Firefox et modification de style d'une ligne

**jojo57** · 08/04/2008, 13h57

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 :

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

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

**le_chomeur** · 08/04/2008, 14h18

peux tu nous donner ta structure complète ?

ou un exemple sur plusieurs lignes

**jojo57** · 08/04/2008, 14h25

Bien sur, voici un exemple:

mon fichier .tpl (j'utilise smarty)

Code :

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

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 :

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

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"

**Auteur** · 08/04/2008, 15h09

bonjour,

Code javascript :

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

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

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

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

**le_chomeur** · 08/04/2008, 15h11

ajoute également un

colspan sur ta première td

**Auteur** · 08/04/2008, 15h17

Envoyé par le_chomeur

ajoute également un colspan sur ta première td

ah oui, bien vu

Code html :

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

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>

**jojo57** · 08/04/2008, 15h22

Oups j'ai oublié les points virgules partout...

d'habitude je les mets toujours...

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

**le_chomeur** · 08/04/2008, 15h27

bizare :

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

**jojo57** · 08/04/2008, 15h41

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

**le_chomeur** · 08/04/2008, 18h29

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

**jojo57** · 08/04/2008, 21h02

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

**jojo57** · 09/04/2008, 09h06

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

voici mon code généré

Code :

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

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>

**le_chomeur** · 09/04/2008, 15h48

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

**jojo57** · 09/04/2008, 16h38

bah cette ligne ne saffiche pas correctement,

dans mon code source jai ca

Code :

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

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 :

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

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>

**jojo57** · 09/04/2008, 16h50

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

Firefox et modification de style d'une ligne

JavaScript

Discussions similaires

Partager

Partager