Bonjour à tous !

J'ai encore 2/3 questions concernant de l'affichage de tableaux, qui sont une part non négligeable de ce que je suis entrain de créer (90%...).
J'ai déjà créé un sujet et je me demande si je ne devrais pas les imbriquer, mais pour une facilité de recherche, peut-être que le mieux est d'en créer des différents?

Donc voilà mon 2e sujet, après ma question sur l'overflow Smiley biggrin (Promis je me calme après Smiley lol ).

J'ai ce tableau-ci:
upload/1513323674-46858-exempletableau.png
<th> pour les en-têtes,
1 ligne <tr> vide (td colspan="8"...),
1 ligne <tr> de titre de catégorie,
plusieurs lignes <tr> de contenu, et on répète l'opération.

Ce tableau résume les informations des salariés, mais je souhaite, en dessous de chacun, obtenir la suite de leurs informations (les anciennes dates de formations, les numéros de sécurité sociale, les lien vers la copie des premières pages de leur contrat de travail...).

Mon objectif est d'obtenir ceci: W3School - show panel sans être coincé par la forme de mon tableau (d'où l'envie d'une div).

Sauf que, dans mes tests, en cliquant sur mon lien, la div s'affiche et disparaît de suite...
J'ai checké si je n'avais pas d'autres display qui compromet le système, mais le reste est au dessus de mes compétences actuelles: Je fais exactement ce qu'il y a sur le lien au dessus, mais ça ne fonctionne pas Smiley sweatdrop

C'est pour cela que je fais appel à vous !

Mon tableau est codé de la façon suivante:

    <table>
      <tr class="h40">
        <th class="w50 tac">ID</th>
        <th class="w155 tac">Nom</th>
        <th class="w155 tac">Prénom</th>
        <th class="w115 tac">Validité <br>Aptitude Médicale</th>
        <th class="w115 tac">Validité <br> Formation Amiante</th>
        <th class="w115 tac">Validité <br>Formation SST</th>
        <th class="w90 tac">Masque VA<br>(fit-test)</th>
        <th class="w90 tac">Masque AA<br>(fit-test)</th>
      </tr>
      <tr><td class="ligneVide" colspan="8"></td></tr>
      <tr class="h20"><td class="titreGroupe tac" colspan="8">Personnel Encadrement Technique</td></tr>
      <tr class="h40 ligne ligneWarning">
        <td class="tac"><a href="#">01</a></td>
        <td class="tac"><a href="" [b]onclick="myFunction()"[/b]>W</a></td>
        <td class="tac"><a href="">G</a></td>
      </tr>
      <div id="testHidden">Test</div>
      <tr class="h40 ligne">
        <td class="tac">02</td>
        <td class="tac">D</td>
        <td class="tac">G</td>
      </tr>
</table>
<!-- Et tout en bas, avant le </body> -->
  <script>
    function myFunction() {
        document.getElementById("testHidden").style.display = "block";
    }
  </script>


Je n'ai pas d'autre "display" dans mon CSS ou dans ma page HTML, et le CSS qui efface est comme ceci, il fonctionne très bien:

#testHidden {
  display: none;
}

(bien entendu j'ai fait le tri des lignes et colonnes - je me pencherai sur la référence à afficher quand j'aurai réussi une fois l'affichage, là c'est fixe avec un id, l'objectif est que ca soit lié à la ligne supérieur (à l'id du salarié par exemple).

J'espère que j'ai été assez clair... N'hésitez pas s'il y aurait des manquements. Je peux mettre toute la feuille CSS mais ça risque de faire trèèèès long...

Merci !

Vincent
Bonjour Vincent,

Il y a un code étrange dans cette ligne
<a href="" [b]onclick="myFunction()"[/b]>


Je conseille plutôt
<td onclick="functionJS()">...</td>

ou même sur toute la ligne
<tr onclick="functionJS()"><td></td></tr>


On ne peut pas imbriquer une <div> dans un tableau, utiliser (il y a 8 colonnes à fusionner)
<tr><td colspan="8">...</td></tr>


Pour afficher/masquer des contenus successifs, on peut aussi utiliser les classes.

.hide {
  display: none;
}

et classList.remove('hide') ou classList.add('hide')

Un exemple en identifiant les lignes par "ligne1", "ligne2"...
et les lignes cachées par "ligne1detail", "ligne2detail".... auxquelles on attribue la classe "detail"

#testHidden {
  display: none;
  border:1px solid blue;
}
.hide {
  display: none;
}
td {
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 5px;
}

 function myFunction() {
        document.getElementById("testHidden").style.display = "block";
    }
function cacherdetails() {
	x = document.getElementsByClassName("detail");
	for (i = 0; i < x.length; i++) {
		x[i].classList.add('hide');
	}
}


<body>
 <table>
      <tr class="h40">
        <th class="w50 tac">ID</th>
        <th class="w155 tac">Nom</th>
        <th class="w155 tac">Prénom</th>
        <th class="w115 tac">Validité <br>Aptitude Médicale</th>
        <th class="w115 tac">Validité <br> Formation Amiante</th>
        <th class="w115 tac">Validité <br>Formation SST</th>
        <th class="w90 tac">Masque VA<br>(fit-test)</th>
        <th class="w90 tac">Masque AA<br>(fit-test)</th>
      </tr>
      <tr><td class="ligneVide" colspan="8"></td></tr>
      <tr class="h20"><td class="titreGroupe tac" colspan="8">Personnel Encadrement Technique</td></tr>
      <tr class="h40 ligne ligneWarning">
        <td class="tac"><a href="#">01</a></td>
        <td class="tac"><a href="javascript:myFunction()">W</a></td>
        <td class="tac"><a href="">G</a></td>
      </tr>
      <tr id="testHidden" onclick="document.getElementById('testHidden').style.display = 'none';">
      <td colspan="8"> Détails de la ligne 1 (cliquer pour fermer) </td>
      </tr>
      
      <tr  id="ligne3" onclick="document.getElementById(this.id+'detail').classList.remove('hide');">
        <td class="tac">Cliquer</td>
        <td class="tac">Une</td>
        <td class="tac">Cellule</td>
        <td class="tac">Quelconque</td>
      </tr>
      <tr class="hide detail" id="ligne3detail" onclick="this.classList.add('hide')">
      	<td colspan="8"> Détails de la ligne 3 (cliquer pour fermer) </td>
      </tr>
      <tr  id="ligne4" onclick="document.getElementById(this.id+'detail').classList.remove('hide');">
        <td class="tac">Ici</td>
        <td class="tac">la</td>
        <td class="tac">ligne</td>
        <td class="tac">suivante</td>
      </tr>
      <tr class="hide detail" id="ligne4detail" onclick="this.classList.add('hide')">
      	<td colspan="8"> Détails de la ligne 4 (cliquer pour fermer) </td>
      </tr>
</table>
<button onclick="cacherdetails()">Cacher tous les détails</button>
</body>

Modifié par hopla (15 Dec 2017 - 19:52)
Meilleure solution
Salut !

Merci pour ta réponse ! Je n'ai pas pu étudier la question plus tôt mais je me suis penché dessus hier soir.

concernant le bout de code:
<tr><td colspan="8">...</td></tr>

C'est justement ce que j'avais fait après avoir posté le petit doc.
J'ai d'ailleurs mis une div à l'intérieur pour placer des choses. C'est pas beau et j'ai mis de coté pour revenir plus tard.

En revanche, sur une autre partie du projet j'ai utilisé un petit hack de bouton radio, qui sera difficile de mettre en place dans mon cas: afficher une <div> (dans mon exemple), lorsqu'un bouton radio est coché.

Je m'explique avec un code, plutôt qu'un long paragraphe, mais d'abord petite introduction: Imaginez que ma liste est du même type qu'une FAQ, quand je clic dessus, ça affiche la suite du document. Si je clique sur une autre, ca ferme là, et ouvre celle désirée... (D'où la radio et pas la checkBox. Et dans le même temps, ca affiche un "+" ou un "-" selon l'état de la radio...

Il ne me manque qu'une seule chose: arriver à mettre le focus sur le h2 qui va bien (car là, ca ouvre/ferme mais la fenetre ne bouge pas... donc faut scroller vers le haut pour arriver au début du paragraphe). Mais un <a></a> autour du label prends le pas sur le changement d'état du bouton radio...


        <input type="radio" id="proc-03-A" name="proc">
        <div class="conteneurProcessus">
          <h2>
              <label for="proc-03-A">
              <!-- Contenu du Label -->
            </label>
          </h2>
          <div class="donneesProcessus">
<!-- ... Contenu de la div ... -->
            </div>
            <p class="tac"><a class="btn" href="" alt="">Export pour PRAM</a></p>
          </div>
        </div>




/* On cache la checkbox de la ligne, le sigle "-" et la div de description */
input[type=radio],
input[type=radio] + div.conteneurProcessus div.donneesProcessus,
.conteneurProcessus .label-moins {
  display: none;
}

/* Si la case est coché, on affiche la div de données, on affiche le sigle "-", on cache le signe "+" */
input[type=radio]:checked + div.conteneurProcessus div.donneesProcessus { display: block; }
input[type=radio]:checked + div.conteneurProcessus h2 label .label-moins { display: inline;}
input[type=radio]:checked + div.conteneurProcessus h2 label .label-plus { display: none;}


Je vais me pencher sur mon tableau maintenant Smiley lol

Encore Merci !
Vincent
Modifié par Vbpix (19 Dec 2017 - 09:25)
Salut !

Grosse semaine, pas trop de temps Smiley decu J'ai voulu approfondir l'astuce sans JS, mais ça bloque...

L'objectif était de mettre tout dans une ligne en display: none; et de n'afficher que quand la case est cochée. Sauf que cela ne fonctionne pas...

Je cherche à sortir de la ligne pour aller chercher la suivante, sans succès.

J'arrive à ce code HTML:

<table>
  <tr class="h40 ligne ligneAlerteNiveau3">
    <td class="tac">06</td>
    <td class="tac">W</td>
    <td class="tac">G</td>
    <td class="tac"><a href="">19/07/2019</a></td>
    <td class="tac"><a href="">04/11/2019</a></td>
    <td class="tac"><a href="">-</a></td>
    <td class="tac"><a href="">17.VA.003<br>(13/10/2018)</a></td>
    <td class="tac celluleAlerteNiveau3"><a href="">17.AA.003<br>-</a></td>
    <td class="tac"><input type="checkbox" id="ficheSalarie-06"></td>
  </tr>
  <tr class="ficheSalarie">
    <td colspan="9">
       <!-- Contenu caché -->
    </td>
  </tr>
</table>


Et pour cacher la ligne, coté CSS:

tr.ficheSalarie { 
  display: none;
}


Sauf que je n'arrive pas à dire: Quand je coche ligne <tr>, je veux travailler sur la ligne "<tr>+1" car les sélecteurs CSS ne marche que pour les enfants ou frères et soeurs: Et ici, ce serait un "cousin"...

Une idée?

Pour info, j'ai aussi testé en mettant l'input entre les 2 <tr>, mais ca ne marche pas du tout pour le coup avec

table input[type="checkbox"] + tr.ficheSalarie { 
  display: table-row;
}

Pour une raison que j'ignore, il est bien sur ce "chemin" dans le code, mais j'ai l'impression que comme il n'est pas sur une ligne de tableau, il s'affiche avant le <table> et donc......


Merci par avance !

Vincent
Salut à tous !

J'ai abandonné l'idée du CSS, et je suis passé en javascript. Mon manque de compétence n'a pas eu d'impact grâce au code de hopla !

Pour clôturer ce sujet, j'ai donc adapter le code donné par hopla pour afficher ou non:

Plus tard, php gérera les données pour incrémenter ligne1, ligne2.... et les détails.

J'ai donc ajouté d'une classe .hide comme préconnisé, et adapter mon code HTML en intégrant directement dans les liens, les différents affichages:

Je me retrouve avec une cellule <td> avec le lien et un logo "+", et une cellule <td> avec le logo "-", celle-ci est cachée grâce à la classe hide.

Au clique sur le lien: Affichage des détails, supprimer la classe "hide" de la cellule "-" et on l'ajoute au "+". pour inverser les affichages.

Ce qui nous donne une ligne interminable (que je décompose ici):

<td class="tac" id="ligne1LogoPlus">
  <a href="javascript: 
    document.getElementById('ligne1detail').classList.remove('hide'); <!-- affichage de ligne1detail -->
    document.getElementById('ligne1LogoMoins').classList.remove('hide'); <!-- affichage du logo moins -->
    document.getElementById('ligne1LogoPlus').classList.add('hide');"><i class="fa fa-plus-square-o fa-2x"></i> <!-- cacher le logo plus -->
  </a>
</td>

<!-- Simplement l'inverse sur le lien du "-"... -->
<td class="tac hide" id="ligne1LogoMoins"><a href="javascript: document.getElementById('ligne1detail').classList.add('hide'); document.getElementById('ligne1LogoMoins').classList.add('hide'); document.getElementById('ligne1LogoPlus').classList.remove('hide');"><i class="fa fa-minus-square-o fa-2x"></i></a></td>          


Il va falloir que je me penche sur le javascript Smiley lol (Pour éviter les doublons, grâce au code de hopla !)

Merci à tous !!

Vincent