[CSS] Cacher / afficher ligne tableau

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Cacher / afficher ligne tableau

ddsjm

Bonsoir,

Je débute en CSS et je cherche à cacher/ afficher des lignes d'un tableau.

Lorsque l'utilisateur clique sur le plus, une ou plusieurs lignes doivent apparaitre dessous.
A contrario, lorsqu'il clique sur le moins orange, les lignes doivent se cacher.
Voici à quoi ressemble le tableau :

Je vois bien comment faire ça en PHP mais cela implique un rechargement de la page. Pour éviter cela, je cherche à effectuer cette opération à l'aide de la feuille de style CSS.
Je souhaiterais éviter au maximum le javascript que je connais pas du tout ...

Merci d'avance pour votre aide

---------------
Mon vieux feedback :)

Publicité

MaybeEijOrNot

but someone at least

Javascript?

olivthill

Oui en Javascript.
Il faut que le + et le - soit associés à des objets HTML qui supporte le onClick().
Par exemple avec des :

Puis la disparition se fait par la fonction :

function javascript:disparition(maligne) {
document.getElementById(maligne).style.display="none";
}

Et la réapparition par :

function javascript:apparition(maligne) {
document.getElementById(maligne).style.display="block";
}

ddsjm

Merci pour vos réponses,
Je pense qu'il est temps de me lancer dans le javascript...
Malheureusement je dois mal intégrer le code et cela ne marche pas.

D'après ce que j'ai pu trouver, les fonctions sont à renseigner dans le Head. Voici ce que j'ai mis :

Code :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Liste_fiche_bateau</title>
<script type="text/javascript">
function javascript:disparition(maligne) {
document.getElementById(maligne).style.display="none";
}
function javascript:apparition(maligne) {
document.getElementById(maligne).style.display="block";
}
</script>
<style type="text/css">
<!--
@import url("style.css" );
-->
</style>
</head>

Ensuite j'appelle la fonction disparition en cliquant sur l'image du trait moins orange ou sur le nom de la première colonne:

Code :

<td class="bateau"><A onClick="javascript:disparition('Ligne1');"><IMG SRC="table-images/Moins_orange.png" ALT="+" TITLE="Cacher les versions"></a></td>
<td class="bateau"><A onClick="javascript:disparition('Ligne1');">First 210</a></td>

Pour finir je déclare l'id de la ligne de mon tableau en le nommant Ligne1 :

Code :

<tr id="Ligne1">
<td class="version"></td>
<td class="version"> Quillard PTE </td>
<td class="version"> Tirant d eau : 6.25 m </td>
<td class="version"></td>
<td class="version"></td>
<td class="version"></td>
<td class="version"></td>
<td class="version"></td>
</tr>

J'ai testé en remplaçant l'id du tr par style="display:none" et la ligne est bien cachée.
Je travail en local directement sur mon disque dur.
Avez-vous une idée d'ou le problème pourrait venir?

Merci d'avance,

olivthill

Désolé, j'avais répondu sans testé, et un copier/coller m'a fait mettre le mot javascript: en trop.
Au lieu de :

function javascript:disparition(maligne) {

écrire :

function disparition(maligne) {

Et idem pour l'autre fonction.

ddsjm

C'est bon ça marche,
Pour afficher plusieurs lignes en même temps j'ai utilisé la fonction :
document.getElementByClassName
Merci encore pour votre aide ....

---------------
Mon vieux feedback :)

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] Cacher / afficher ligne tableau

Sujets relatifs
Comment dupliquer certaines colonnes d'un tableau en javascript?	Afficher une Liste.
Afficher timestamp mtime & ctime avec résultats ls ou find	Dreamweaver cs 5.5 liens et tableau
Vidéo conférence en ligne	Tableau php mysql editable et modifiable par sélections et filtres
Greasemonkey, traiter les données d'un tableau	décalage sur un tableau de byte
3 boutons CSS dans la même page	Comparer deux listes en multicritères
Plus de sujets relatifs à : [CSS] Cacher / afficher ligne tableau

Page générée en 0.047 secondes