[Résolu] Effet déroulant sur une ligne de tableau

Question

etienne69

14 Apr 2022 à 00:10

Bonjour à tous...

J'ai trouvé sur Internet quelques lignes de css sur l'animation d'un menu déroulant que
j'aurai bien aimé adapter à une ligne d'un tableau.
J'aimerai qu'au survol de la souris sur le tr déclencheur, le tr suivant "cible" (s'il contient des données) puisse s'animer en glissant doucement vers le bas... à la manière d'un menu déroulant en poussant le reste du tableau

Voici le css du menu déroulant qui fonctionne (je l'ai épuré au maximum)


#menu-accordeon li li {
   max-height:0;
   overflow: hidden;
   transition: all .7s;   
}
#menu-accordeon li:hover li {
  max-height: 15em;
}

Et le code sur lequel il agit


<ul id="menu-accordeon">
    <li>COUCOU
        <ul>
            <li>TEST1</li>
            <li>TEST2</li>
            <li>TEST3</li>
        </ul>
    </li>
</ul>

Et voila le code sur lequel j'aimerai l'adapter :


<thead>
    <tr>
        <th>DÉSIGNATIONS</th>
        <th>QTÉ</th>
        <th >PU</th>
        <th>TOTAL</th>
</thead>
.../...
<tr id="déclencheur">
    <td>CHAMBRE UNE PERSONNE</td>
    <td>1</td>
     <td>45.00</td>
     <td>45.00</td>
</tr>
<tr id="cible">
    <td colspan="4">
         Chambre avec vue sur jardin, au calme, WC et douche dans le couloir en face...
    </td>
</tr>
<tr id="déclencheur">
    <td>CHAMBRE CÔTÉ RUE</td>
...etc...

(Evidemment ce tableau est plus complexe, d'autant qu'il est alimenté par une bdd et il arrive que le tr cible contienne un td vide, par conséquent j'ai écrit une condition en PHP qui créé ou non ce tr s'il n'est pas vide... Mais pour ne pas compliquer le code je viré tout le php)

J'ai tourné ces 3 pauvres lignes de css sans jamais arriver à obtenir ce que je voulais...
Merci d'avance à celui ou ceux qui pourraient m'aider !
Modifié par etienne69 (17 Apr 2022 - 18:52)

_laurent

Modérateur

14 Apr 2022 à 09:30

Salut,

Dans un sélecteur CSS l'enchainement :

li li

veut dire qu'un li est dans un li.

Ici dans ton tableau tu cherches a sélectionner l'élément frère donc il faut utiliser + ou ~selon si tu veux une adjacence directe ou indirecte (mais ici tu en veut une directe donc +)
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Selectors

Au passage tu n'as pas non plus des li tu as des tr donc il faut aussi changer ça hein. Tu peux nous partager le code CSS que tu as fait.

BONUS : tu as 2 fois l'id déclencheur mais j'imagine que tu as plein d'id déclencheur et autant d'id cibles. Un id doit être unique. Utilise les classes pour pouvoir mettre déclencheur et cibles en plusieurs fois.

BONUS 2 : SPOIL je pense que tu vas vite t'en apercevoir mais ca va être un beau bordel quand tu va passer la souris au dessus de ton tableau si tout se pousse au survol Smiley lol

Bonne journée
Modifié par _laurent (14 Apr 2022 - 14:58)

etienne69

14 Apr 2022 à 13:39

Merci beaucoup _laurent...Je vais éplucher ta réponse très complète !
J'avais bien remarqué que mon css était pour les ul et li mais j'avais essayé d'y mettre
des td et des tr sans succès évidement puisque j'ai compris après qu'il fallait que mon code
atteigne des éléments spécifiques !

À y réfléchir, tu as complètement raison pour le beau bordel au survol Smiley biggrin

, je me demande
si je ne vais pas appliquer tes conseils sur des onclick !
Je regarde tout ça et reviens dès que j'aurais pondu qq lignes !
Encore merci pour ces pistes !

_laurent

Modérateur

14 Apr 2022 à 14:57

Avec plaisir si ca te guide. Passer par le clic me semble effectivement plus vivable ! Comme tu parle de onclick et avant que tu rajoute un onclik sur chaque <tr> je te laisse lire la doc des eventListner : https://www.w3schools.com/js/js_htmldom_eventlistener.asp Smiley murf

Bon courage !

etienne69

14 Apr 2022 à 17:42

Bon je suis toujours en galère avec mon animation tr...

J'ai trouvé un autre bout de code sur Internet que j'ai adapté à mon cas mais même si le résultat se rapproche de l'effet escompté, graphiquement c'est pas terrible...
(J'ai refait en html plutôt qu'en php la table car j'avais des trucs bizarre avec le navigateur qui se permettait de fermer les balises tout seul).


<tbody>
   <?php
      $i=0;
      while ($data_prestations=$req_prestations->fetch()) {?>
   <tr class="tr<?php echo (++$i%2==0 ? "clair" : "sombre");?>">
      <td data-label="TYPE">
         <?php echo $data_prestations['designation'];?>
      </td>
      <td data-label="QTÉS" class="td-droite td-prestations">
         <?php
            $quantites = $data_prestations['quantites'];
            echo number_format($quantites, 2, ",", ".") . '  ';
            ?>
      </td>
      <td data-label="PRIX" class="td-droite">
         <?php
            $prix = $data_prestations['prix'];
            echo number_format($prix, 2, ",", ".") . ' €';
            $total = $quantites*$prix;
            $total_g=$total_g+$total;
            ?>
      </td>
      <td data-label="TOTAL" class="td-droite total">
         <?php
            echo number_format($total, 2, ",", ".") . ' €</div><br>';
            ?>
      </td>
   <tr>
      <?php
         if($data_prestations['descriptif']<>''){?>
   <tr class="tr<?php echo ($i%2==0 ? "clair" : "sombre");?>">
      <td colspan="4" class="descriptif">
         <div class="div-cachee">
            <?php echo $data_prestations['descriptif'];?>
         </div>
      </td>
   </tr>
   <?php
      }
      }
      ?>
</tbody>

Le css :


.div-cachee{
    width: 100%;
    overflow: hidden;
    -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
    -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
    transition: max-height 1.5s ease cubic-bezier(0, 1.05, 0, 1);
    max-height: 15px;
}

.div-cachee:hover{
    -webkit-transition: max-height 2s ease;
    -moz-transition: max-height 2s ease;
    transition: max-height 2s ease;    
    max-height: 400px;
}

et le résultat :
div-cachee légèrement apparente (je descendrai le texte pour y mettre une petite indication graphique pour préciser que cette prestation contient du détail)...
upload/1649950734-52818-capturedancrandu2022-04-1417-.png

upload/1649950734-52818-capturedancrandu2022-04-1417-.png

et au survol de la partie apparente de la div-cachee :
upload/1649950779-52818-capturedancrandu2022-04-1417-.png

Le système me semble un peu usine à gaz et il y a certainement plus simple !

Merci d'avance pour vos suggestions...
Je vais continuer de chercher du côté des survols des frères...

Je voudrais si possible me passer de Javascript mais si on oublie le survol, avec le onclick je n'aurai pas le choix...
Modifié par etienne69 (14 Apr 2022 - 17:44)

etienne69

14 Apr 2022 à 17:47

_laurent a écrit :
...Passer par le clic me semble effectivement plus vivable ! ...je te laisse lire la doc des eventListner...

Pas vu ta réponse...
Je vais regarder tout de suite d'autant que la solution de mon dernier post me fout un peu le binz dans mon responsive !

etienne69

14 Apr 2022 à 18:20

En lisant la doc de W3school j'ai écrit ça qui fonctionne de manière un peu brutale :


<tr id="trcache" class="tr<?php echo (++$i%2==0 ? "clair" : "sombre");?>">
.../...
<tr id="trcible" class="trcible tr<?php echo ($i%2==0 ? "clair" : "sombre");?>">
<td colspan="4" class="descriptif">
    <?php echo $data_prestations['descriptif'];?>
</td>
.../...


/*######### Div Cachée ###################*/
           document.getElementById("trcache").addEventListener("click", displayDiv);
            function displayDiv() {
                var elem,style,affichage;
                elem = document.querySelector('.trcible');
                if(elem){                    
                    style = getComputedStyle(elem);
                    affichage = style.display;
                    if(affichage=='none'){
                        document.getElementById('trcible').style.display='block';
                    }
                    else {
                        document.getElementById('trcible').style.display='none';
                    }
                }
            }
  // ###########################################

C'est mieux, mais il faudrait que j'arrive à faire une animation en douceur !!!

EDIT : Ça fonctionne mieux avec une DIV dans le td !

EDIT2 : On approche !


.trcible{
    display: none;
}
.clic{
    cursor: pointer;
}


<tr id="trcache" class="tr<?php echo (++$i%2==0 ? "clair" : "sombre");
    if($data_prestations['descriptif']<>''){
        echo ' clic';
    }?>
">


<?php
if($data_prestations['descriptif']<>''){?>
    <tr  class="tr<?php echo ($i%2==0 ? "clair" : "sombre");?>">
        <td colspan="4" class="descriptif">
            <div id="trcible" class="trcible">
                <?php echo $data_prestations['descriptif'];?>
            </div>
        </td>
    </tr>
<?php
}

Modifié par etienne69 (14 Apr 2022 - 19:04)

etienne69

17 Apr 2022 à 18:51

Bon j'ai pas mal galéré mais après des heures de recherche, des pistes récupérées sur d'autres forum voici ce que j'ai fait qui fonctionne "presque" comme je veux :


<tbody>
   <?php
      $i=0;
      while ($data_prestations=$req_prestations->fetch()) {?>
   <tr id="trprestation" class="tractive <?php echo (++$i%2==0 ? "trclair" : "trsombre")?>">
      <td class="tdactive" data-label="TYPE">
         <div>
            <?php 
               echo $data_prestations['designation'];
               if($data_prestations['descriptif']<>NULL){                   
                   echo '<button class="bouton" type="button"><img src="img/dw.png"/></button>';
               }
               ?>
         </div>
      </td>
      <td data-label="QTÉS" class="td-droite td-prestations tdactive">
         <div>
            <?php
               $quantites = $data_prestations['quantites'];
               echo number_format($quantites, 2, ",", ".") . '  ';
               ?>
         </div>
      </td>
      <td data-label="PRIX" class="td-droite td-prix tdactive">
         <div>
            <?php
               $prix = $data_prestations['prix'];
               echo number_format($prix, 2, ",", ".") . ' €';
               $total = $quantites*$prix;
               $total_g=$total_g+$total;
               ?>
         </div>
      </td>
      <td data-label="TOTAL" class="td-droite total td-prix tdactive">
         <div>
            <?php
               echo number_format($total, 2, ",", ".") . ' €';
               ?>
         </div>
      </td>
   </tr>
   <?php
      if($data_prestations['descriptif']<>NULL){?>
   <tr class="<?php echo ($i%2==0 ? "trclair" : "trsombre");?>">
      <td class="tdactive" data-label="DÉTAIL" colspan="4">
         <div class="divactive">
            <?php echo $data_prestations['descriptif'];?>
         </div>
      </td>
   </tr>
   <?php
      }
      }?>
</tbody>
</table>


// ######## AFFICHAGE TR CACHÉE ##############
$('button').on('click', function() {
    $(this).closest('tr').next('tr').toggleClass('tractive');
});


.tdactive {
  padding: 0;
}

.divactive {
    overflow: auto;
}

tr td div {
  max-height: 0;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
}

tr.tractive td div {
  max-height: 100px;
  padding: 10px 10px;
  transition: max-height 0.6s, padding 0.6s;
}

.bouton {
  float: right;
  background-color: transparent;
}

upload/1650214258-52818-capturedancrandu2022-04-1718-.png

upload/1650214278-52818-capturedancrandu2022-04-1718-.png

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Effet déroulant sur une ligne de tableau