Garder le meme style

**laurentibus** · 26/03/2008, 16h47

RE

bon j'arrive a masquer/ afficher mon tableaux a ma guise

mais le probleme est que lorsque je le raffiche celui ci a un nouveau style ou du moins pas le style que je veux ...
il s'agit peut etre des colonnes TD qui perdent leur style ...

voici le code de ma fonction javascript et ainsi que le code de mon tableau

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
 
 
function hide(identifiant) {
					       if (document.getElementById(identifiant).style.display=='block') {
					        document.getElementById(identifiant).style.display='none';
							document.getElementById(identifiant).className='table usual';
							document.getElementById('EHNJTABLETD').className='td usualMoyenne';
							} 
							else {
					        document.getElementById(identifiant).style.display='block';
							document.getElementById(identifiant).className='table usual';
							document.getElementById('EHNJTABLETD').className='td usualMoyenne';
					      };
 
					   }

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
<table class="usual" id="EHNJTABLE" >
						<tr>
						<td class="usualMoyenne" id="EHNJTABLETD">
							<b>EHNJ</b> 
						</td>
						<td class="usualMoyenne" id="EHNJTABLETD2">
							<b>COMMENTAIRE</b> 
						</td>
						</tr>

Voila j arrive a mettre une nouvelle classe (ou garder l ancienne ) a mon tableau ou a mes colonnes en mettant : (ici je change)

document.getElementById(identifiant).className='table usual2';
document.getElementById('EHNJTABLETD').className='td usualMoyenne2';

mais le pb c'est que j ai toujours toujours toujours

une troisieme colonne vide ... mes deux premieres colonnes ne veulent pas prendre une width de 50% et donc 100 % du tableaux

En fait il semblerait que j'arrive bien a recuperer le style pour table et ses td mais je ne sais pourquoi j ai une troisieme colonne qui est la ???

Merci d'avance

**laurentibus** · 26/03/2008, 17h02

Le pire c'est que dans ma page HTML generer avec ma colonne en trop si on regarde le code source ...
ben en fait la colonne y est pas :s:s:s:s:s:::s:s:s:s:s::s:s:s:
sauf que visuelement elle y est

Code :

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

1
2
3
4
 
<tr>
<td id="EHNJTABLETD" class="usualMoyenne"><b>EHNJ</b></td><td id="EHNJTABLETD2" class="usualMoyenne"><b>COMMENTAIRE</b></td>
</tr>

voila j ai trois colonne avec ca

**laurentibus** · 26/03/2008, 17h16

Bon en fait c'est firefox qui bug car tout se passe bien sous iexplorer ..
dommage que se ne soit pas l'inverse ....

Si quelqu'un sait pour firefox merci de me donner la parade

++

**E.Bzz** · 26/03/2008, 17h39

Bonjour,

Envoyé par laurentibus

Bon en fait c'est firefox qui bug car tout se passe bien sous iexplorer ..
dommage que se ne soit pas l'inverse ....

ben justement .....

Vérifie que tes CSS s'appliquent correctement ...

A+

**laurentibus** · 27/03/2008, 09h50

oui oui la page garde bien le lien vers la feuille de style et si je change la classe de mes tableaux ben c'est ok mais j ai toujours cette maudite colonne ...

ca fait chier car ici on travaille avec firefox donc voili voilou faut que je trouve une nouvelle solution

**SpaceFrog** · 27/03/2008, 09h57

tu es sur que tu n'as pas un autre tr quelque part mal fermé ou avec un td en plus ...

montre nous la structure complète du tableau ...

**laurentibus** · 27/03/2008, 10h43

voila mon code mais franchement je pense que c'est firefox le pb car ca marche sous IE, et puis en regardant le code source de la page html on ne voit point de troisième colonne

Voici le code XSL :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
 
 
<xsl:stylesheet version="2.0"  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output method="html" indent="yes" encoding="UTF-8"/>	
		<xsl:template match="/">
			<html>
				<head>
					<title>Evénements  <xsl:value-of select="EvenementProduit/@nomModele"/> </title>
					<link rel="stylesheet" type="text/css" href="./styles/style.css"/>
				</head>
				<body>
					<h1>Evénements du modèle <xsl:value-of select="EvenementProduit/@nomModele"/></h1>
					<br/>
					<input type="button" value="EHNJ" onClick="javascript:hide('EHNJTABLE');"/>
					<input type="button" value="EMS" onClick="javascript:hide('EMSTABLE');"  />
					<input type="button" value="ERR" onClick="javascript:hide('ERRTABLE');"  />
					<br/>
					<br/>
					<table class="usual" id="EHNJTABLE">
						<tr>
						<td class="usualMoyenne">
							<b>EHNJ</b> 
						</td>
						<td class="usualMoyenne">
							<b>COMMENTAIRE</b> 
						</td>
						</tr>	
						<!--REMPLISSAGE DES LIGNES EHNJ-->
						<xsl:for-each select="//Evtp">
							<xsl:if test="@typeEvt= 'EHNJ' ">
								<tr>
									<td class="usualMoyenne">
									<a class="lien">
									<xsl:attribute name="OnClick">parent.frames['cadre2'].location.replace('./HTML/Details<xsl:value-of select="@nomEvt"/>.html');</xsl:attribute>
									<xsl:attribute name="title">Voir les détails de <xsl:value-of select="@nomEvt"/></xsl:attribute>
									<xsl:value-of select="@nomEvt"/> 
									</a> 
									</td>
									<td class="usualMoyenne">
										<xsl:value-of select="@commentaire"/>
									</td>
								</tr>
							</xsl:if>
						</xsl:for-each>
						</table>
.....
 
	<script type="text/JavaScript">
					<xsl:text disable-output-escaping="yes">
					<![CDATA[
						function hide(identifiant) {
					       if (document.getElementById(identifiant).style.display=='block') {
					        document.getElementById(identifiant).style.display='none';
 
							} 
							else {
					        document.getElementById(identifiant).style.display='block';
 
 
					      };
 
					   }
					]]>
					</xsl:text>
					</script>

Le code css :

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
 
table.usual
{
	border-width:1px; 
	width:100%;
	border-style:solid; 
	border-color:red;
	border-collapse:collapse;
}
 
td.usualMoyenne
 { 
	width:50%;
	text-align:center;
	border-width:1px; 
	border-style:solid; 
	border-color:red;
	border-collapse:collapse;
 
 
}

et le code de la page html creer :

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
 
 
 
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ev&eacute;nements  Roue</title>
<link href="./styles/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Ev&eacute;nements du mod&egrave;le Roue</h1>
<br>
<input onClick="javascript:hide('EHNJTABLE');" value="EHNJ" type="button"><input onClick="javascript:hide('EMSTABLE');" value="EMS" type="button"><input onClick="javascript:hide('ERRTABLE');" value="ERR" type="button">
<br>
<br>
<table id="EHNJTABLE" class="usual">
 
<tr>
<td class="usualMoyenne"><b>EHNJ</b></td><td class="usualMoyenne"><b>COMMENTAIRE</b></td>
</tr>
<tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr>
 
 
......
</table>

Voila

c'est bizarre hein

mais je vous jure que mon tableau a trois colonne quand je le masque et que je le reaffiche ...

**Matthieu2000** · 27/03/2008, 11h11

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
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
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ev&eacute;nements  Roue</title>
<style>
table.usual0
{
	border-width:1px; 
	width:100%;
	border-style:solid; 
	border-color:red;
	border-collapse:collapse;
}
 
table.usual0 td
 { 
	width:50%;
	text-align:center;
	border-width:1px; 
	border-style:solid; 
	border-color:red;
	border-collapse:collapse;
 
}
 table.usual1
{
	border-width:1px; 
	width:90%;
	border-style:solid; 
	border-color:red;
	border-collapse:collapse;
}
 
table.usual1 td
 { 
	width:30%;
	text-align:center;
	border-width:1px; 
	border-style:solid; 
	border-color:red;
	border-collapse:collapse;
 
}
 
</style>
<script type="text/JavaScript">
 
	indice=0;				
						function changeClass(identifiant) {
					       document.getElementById(identifiant).className='usual'+(indice++ %2);
 
					   }
 
	function hide(identifiant) {
					       if (document.getElementById(identifiant).style.display=='block') {
					        document.getElementById(identifiant).style.display='none';
							document.getElementById(identifiant).className='usual0';
 
							} 
							else {
					        document.getElementById(identifiant).style.display='block';
							document.getElementById(identifiant).className='usual0';
 
					      };
 
					   }
 
 
 
					</script>
</head>
<body>
<h1>Ev&eacute;nements du mod&egrave;le Roue</h1>
<br>
<input onClick="javascript:hide('EHNJTABLE');" value="EHNJ" type="button">
<input onClick="javascript:changeClass('EHNJTABLE');" value="CHG" type="button">
<br>
<br>
<table id="EHNJTABLE" class="usual0"> 
<tr>
<td class="usualMoyenne"><b>EHNJ</b></td><td class="usualMoyenne"><b>COMMENTAIRE</b></td>
</tr>
<tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr>
 <tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr><tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr><tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr><tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr><tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr>
</table>
</body>
</html>

**laurentibus** · 27/03/2008, 11h37

c'est toujours le même problème sous firefox même avec ton code matthieu ...

Franchement je pense que c'est Firefox le pb alors c'est pas grave je vais trouver une autre solution ou attendre des mises a jour Firefox

Ne vous prenez pas la tete car je pense qu'on y arrivera pas vu que notre code est déjà bon !!!!!!!!!

Enfin comme vous voulez si ce pb vous ronge et que vous finissez miraculeusement par le résoudre alors faites moi un signe

Merci a tous. ++

**Matthieu2000** · 27/03/2008, 11h55

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
<div id="EHNJTABLE">
<table  class="usual0"> 
<tr class="usual0">
<td class="usualMoyenne"><b>EHNJ</b></td><td class="usualMoyenne"><b>COMMENTAIRE</b></td>
</tr>
<tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr>
 <tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr><tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr><tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr><tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr><tr>
<td class="usualMoyenne"><a class="lien" OnClick="parent.frames['cadre2'].location.replace('./HTML/DetailsEHNJ_SaturationRoue.html');" title="Voir les d&eacute;tails de EHNJ_SaturationRoue">EHNJ_SaturationRoue</a></td><td class="usualMoyenne">Indication de saturation roue</td>
</tr>
</table>
</div>

mets tes tableaux dans un calque!

**laurentibus** · 27/03/2008, 12h19

Matthieu effectivement en mettant chaque tableau dans une div et en masquant ou affichant cette div , il n y as plus de pb d'affichage ...

merci mon pti pro

(deja deux fois que tu me sauve

)

++

Garder le meme style

JavaScript

Discussions similaires

Partager

Partager