28219 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je suis désespéré......

je suis en train de faire un xslt couplé à du css et javascript.
je travaille sur un tableau où j'aimerais faire apparaitre et disparaitre les colonnes que je veux...

Alors que la suppression marche (display:none), le display:block ne marche pas du tout car ça me foire completement l'affichage... (c'est la séquence qui se produit lorsque je veux masquer puis afficher une colonne)
upload/11616-probleme.PNG

si j'effectue le masquage à partir de la 3eme colonne, lorsque je veux la faire réapparaitre, elle se réaffiche en dessous de la premiere <td> que l'on peut cacher...

Voici le code au cas où ça pourrait aider...

code javascript :

		function afficheId(idBalise)
		{
			document.getElementById(idBalise).style.display='block';
			document.getElementById(idBalise).style.visibility='visible';
		}

		function cacheId(idBalise)
		{				
			document.getElementById(idBalise).style.display='none';
			document.getElementById(idBalise).style.visibility='hidden';
		}
		
		/* permet d'afficher une colonne*/
		function columnDisplay(idBalise, idBaliseAffichage)
		{
			afficheId(idBalise);
			afficheId(idBaliseAffichage);
	
		}
		
		/* permet de cacher une colonne */
		function columnHide(idBalise, idBaliseAffichage)
		{			
			cacheId(idBalise);
			cacheId(idBaliseAffichage);
		}
		
		/* permet de cacher une colonne si elle est affichée et inversement*/
		function displayOrHideColumn(idCheckBox, idBalise, idBaliseAffichage)
		{
			if(document.getElementById(idCheckBox).checked)
			{
				columnDisplay(idBalise,idBaliseAffichage);
			}
			else
			{
				columnHide(idBalise,idBaliseAffichage);
			}
		}


code html (xslt) :


      <table width="467" class="form">
          <tr>
            <td>Description</td>
            <td><input type="checkbox" id="descCheckBoxResult" onclick="displayOrHideColumn('descCheckBoxResult', 'descResult', 'descResultDisplay');" checked="checked"/></td>
            <td>Fichier</td>
            <td><input type="checkbox" id="docCheckBoxResult" onclick="displayOrHideColumn('docCheckBoxResult', 'docResult', 'docResultDisplay');" checked="checked"/></td>
            <td>Méthode</td>
            <td><input type="checkbox" id="methodCheckBoxResult" onclick="displayOrHideColumn('methodCheckBoxResult', 'methodResult', 'methodResultDisplay');" checked="checked" /></td>
          </tr>
          <tr>
            <td>Test Réussi</td>
            <td><input type="checkbox" id="passedCheckBoxResult" onclick="displayOrHideColumn('descCheckBoxResult', 'passedResult', 'passedResultDisplay');" checked="checked" /></td>
            <td>Test Non Concluant</td>
            <td><input type="checkbox" id="inconclusiveCheckBoxResult" onclick="displayOrHideColumn('inconclusiveCheckBoxResult', 'inconclusiveResult', 'inconclusiveResultDisplay');" checked="checked" /></td>
            <td>Test échoué</td>
            <td><input type="checkbox" id="failedCheckBoxResult" onclick="displayOrHideColumn('failedCheckBoxResult', 'failedResult', 'failedResultDisplay');" checked="checked" /></td>
          </tr>
        </table>

	<table class="form" width="100%" cellspacing="0">
		<tr>
			<td><p class="title">Règle de Gestion</p></td>
		    <td id="descResult"><p class="title">Description</p></td>
		    <td id="docResult"><p class="title">Document</p></td>
		    <td id="methodResult"><p class="title">Méthode</p></td>
		    <td id="passedResult"><p class="title">Test Passed</p></td>
		    <td id="inconclusiveResult"><p class="title">Test Inconclusive</p></td>
		    <td id="failedResult"><p class="title">Test Failed</p></td>
		</tr>

		<xsl:for-each select="reportRG/rule">
		<xsl:if test="functionnals">
		<tr class="normal">
			<td class="RG"><xsl:value-of select="@name"/></td>
			<td id="descResultDisplay"><xsl:value-of select="functionnals/functionnal/@description"/></td>
			<td id="docResultDisplay"><xsl:value-of select="functionnals/functionnal/@file"/></td>
			<td id="methodResultDisplay">
				<xsl:for-each select="methods/method">
					<p class="normal"><xsl:value-of select="@methodName"/></p>
				</xsl:for-each>
			</td>
			<td id="passedResultDisplay" class="resultOk">
				<xsl:for-each select="tests/test">
					<xsl:if test="@result = 'Passed'">
						<p class="normal"><xsl:value-of select="@methodName"/></p>
					</xsl:if>
				</xsl:for-each>
			</td>
			<td id="inconclusiveResultDisplay" class="resultInconclusive">
				<xsl:for-each select="tests/test">
					<xsl:if test="@result = 'Inconclusive'">
						<p class="normal"><xsl:value-of select="@methodName"/></p>
					</xsl:if>
				</xsl:for-each>
			</td>
			<td id="failedResultDisplay" class="resultFailed">
				<xsl:for-each select="tests/test">
					<xsl:if test="@result = 'Failed'">
						<p class="normal"><xsl:value-of select="@methodName"/></p>
					</xsl:if>
				</xsl:for-each>
			</td>
		</tr>
		</xsl:if>
		</xsl:for-each>
	</table>


merci de votre aide !
Modifié par taurus (28 Mar 2007 - 10:26)
Salut,

Si j'ai bien compris, tu veux afficher des cellules de tableau qui sont en
display: none ;
?

Il ne vaudrait pas mieux utiliser
display: table-cell ;
pour revenir à leur valeur par défaut que de leur imposer la valeur block ?
Thomas D. a écrit :
Il ne vaudrait pas mieux utiliser
display: table-cell ;
pour revenir à leur valeur par défaut que de leur imposer la valeur block ?
Théoriquement oui, mais il me semble que ça posera problème avec IE. On peut utiliser une chaîne vide pour réinitialiser display :
document.getElementById(idBalise).style.display = "";

Modifié par Julien Royer (28 Mar 2007 - 11:54)