Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Cacher ou Affiche un tbody

Cacher ou Affiche un tbody

2 réponses
Avatar
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
Signaler un problème avec ce contenu

2 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
SAM
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)


(*) <http://www.yoyodesign.org/doc/w3c/css2/tables.html#value-def-table>


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

Avatar
matt
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)


(*) <http://www.yoyodesign.org/doc/w3c/css2/tables.html#value-def-table>


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