Cacher ou Affiche un tbody

Le
matt
Bonsoir,

soit le code suivant :

<html>
<head>
<style type='text/css'>
#idBody{display:none;}
</style>
<script type='text/javascript'>
function toggle()
{
elem = document.getElementById("idBody");
if(elem.style.display != "inline")
elem.style.display = "inline";
else
elem.style.display = "none";

}
</script>
</head>
<body>
<button type='button' onclick="toggle()">Toggle</button>
<table border='1' width='100px'>
<thead>
<tr>
<th>Entete</th>
</tr>
</thead>
<tbody id='idBody'>
<tr>
<td>Text</td>
</tr>
</tbody>
</table>
</body>
</html>

Je voudrais qu'à chaque appuie sur le bouton, le 'tbody' de mon 'table'
se cache puis s'affiche. Ça c'est bon mais le soucis c'est que mon
tableau s'allonge de plus en plus

Comment remédier à ce probleme ???

Merci pour vos réponses,

Matt
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #6891841
Je voudrais qu'à chaque appuie sur le bouton, le 'tbody' de mon 'table'
se cache puis s'affiche. Ça c'est bon mais le soucis c'est que mon
tableau s'allonge de plus en plus...

Comment remédier à ce probleme ???


un tbody n'est pas de style "inline" (*) donc ...

pour Firefox par exemple (ce qui veut dire qu'avec IE ce n'est pas gagné) :

function toggle()
{
elem = document.getElementById("idBody");
if(elem.style.display != "table-row-group")
elem.style.display = "table-row-group";
else
elem.style.display = "none";
}

ou :

function toggle()
{
elem = document.getElementById("idBody").style;
elem.display = elem.display=="table-row-group"?
"none" : "table-row-group";
}

ou (mais il ne faut pas qu'il ait été stylé par css) :

function toggle()
{
elem = document.getElementById("idBody").style;
elem.display = elem.display==""?
"none" : "";
}

ce dernier fonctionnera avec tout navigateur (sauf NC4)


(*)

Voici qui doit fonctionner aussi avec IE :

function toggle()
{
var etat = "table-row-group"; /*@cc_on etat = "block"; @*/
elem = document.getElementById("idBody").style;
elem.display = elem.display==etat?
"none" : etat;
}


--
sm

matt
Le #6935711
Je voudrais qu'à chaque appuie sur le bouton, le 'tbody' de mon
'table' se cache puis s'affiche. Ça c'est bon mais le soucis c'est que
mon tableau s'allonge de plus en plus...

Comment remédier à ce probleme ???


un tbody n'est pas de style "inline" (*) donc ...

pour Firefox par exemple (ce qui veut dire qu'avec IE ce n'est pas gagné) :

function toggle()
{
elem = document.getElementById("idBody");
if(elem.style.display != "table-row-group")
elem.style.display = "table-row-group";
else
elem.style.display = "none";
}

ou :

function toggle()
{
elem = document.getElementById("idBody").style;
elem.display = elem.display=="table-row-group"?
"none" : "table-row-group";
}

ou (mais il ne faut pas qu'il ait été stylé par css) :

function toggle()
{
elem = document.getElementById("idBody").style;
elem.display = elem.display==""?
"none" : "";
}

ce dernier fonctionnera avec tout navigateur (sauf NC4)


(*)

Voici qui doit fonctionner aussi avec IE :

function toggle()
{
var etat = "table-row-group"; /*@cc_on etat = "block"; @*/
elem = document.getElementById("idBody").style;
elem.display = elem.display==etat?
"none" : etat;
}




Bonsoir,

C'est tout bon,

Merci,

Matt...


Publicité
Poster une réponse
Anonyme