[CSS] Cacher / afficher ligne tableau

Marsh Posté le 26-10-2013 à 23:26:16

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 :)

Reply

Marsh Posté le 26-10-2013 à 23:26:16

Reply

Marsh Posté le 26-10-2013 à 23:52:35

Javascript?

Reply

Marsh Posté le 27-10-2013 à 01:00:45

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";
}

Reply

Marsh Posté le 27-10-2013 à 12:06:11

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,

Reply

Marsh Posté le 27-10-2013 à 18:52:25

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.

Reply

Marsh Posté le 27-10-2013 à 19:17:32

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 :)

Reply

[CSS] Cacher / afficher ligne tableau

Sujets relatifs:

Leave a Replay