Discussion :

[surfeur2]

Bonjour,

J'essaye d'afficher ou de masquer une ligne de tableau avec un colspan de 9 mais lorsque jl'affiche ou masque la ligne, le colspan de 9 n'est pas pris en compte, cela affiche le texte dans 1 colonne seulement, voici le code:

Code :

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

1
2
 
<a href="#" onclick="cl(<%=z%>);">clore</a>

Code :

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

1
2
3
4
5
6
7
8
9
<script language="javascript">					
						function cl(z){						
						  if(document.getElementById(z).style.display == 'none') {
				            document.getElementById(z).style.display = 'block';
				        } else {
				            document.getElementById(z).style.display = 'none';
				        }
				        }		
					</script>

Code :

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

1
2
3
<tr id="<%=z%>" style="display:none">
            	<td colspan="9">Texte à afficher avec un colspan de 9</td>
            </tr>

PS. si j'enlève: style="display:none", comme ceci:<tr id="<%=z%>">, le colspan est pris en compte, mais j'ai besoin du code complet pour masquer la ligne au départ...

merci d'avance pour les réponses!

[SylvainPV]

Je déplace en section CSS vu que le problème ne semble pas lié à JS.
Merci de poster le code du tableau HTML complet obtenu côté client, sans code serveur. Idéalement poster la page complète sur codepen ou jsbin, pour voir si une autre règle CSS ne vient pas surcharger là où il ne faut pas.

[Invité]

Bonjour,

en effet, tel quel, le td ne reprend pas toute la largeur : le colspan ne fonctionne plus, car le td est sorti du flux.

Donc j'ai cherché, et trouvé, un astuce :

Code javascript :

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

1
2
3
4
5
6
7
8
9
function cl(z){						
  if(document.getElementById(z).style.visibility == 'hidden') {
    document.getElementById(z).style.position = 'relative';
    document.getElementById(z).style.visibility = 'visible';
  } else {
    document.getElementById(z).style.position = 'absolute';
    document.getElementById(z).style.visibility = 'hidden';
  }
}

Code html :

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

1
2
3
<tr id="<%=z%>" style="visibility:hidden;position:absolute;">
    <td colspan="9">Texte à afficher avec un colspan de 9</td>
</tr>