TD et display

Bonjour,

je cherche a faire apparaître des "TD" d'un tableau via des boutons radio.

Après beaucoup de recherche, je sèche . j'arrive juste à faire disparaître les cellules mais pas l'inverse.

Ci dessous mon code php

...
<input type="radio" id="maintenance2" name="CT" />Maintenance (8-16)
<input type="radio" id="intervention" name="CT" />Intervention (10-18)
<input type="radio" id="astreinte" name="CT" />astreinte
...
echo '<td class="Calendaraffichecheck" bgcolor='.$Couleurfond.'><input type="checkbox"></td>'; // Astreinte
...

et le css correspondant :

TD.Calendaraffichecheck {
	display: none;
}
#astreinte:checked + .Calendaraffichecheck {
	display: block;
	border: 1px solid #000000;

}

Merci d'avance pour votre aide

Xavier

Bonjour Xavier_91,

Je ne vois pas de solution 100% css avec ton code html
il faut passer par le Javascript
Modifié par aliasdmc (03 Sep 2018 - 19:31)

Bonjour,

Ton code HTML et CSS sont corrects et devraient en théorie parvenir au bon résultat.

Par contre, le modèle tabulaire HTML est très spécial : des éléments sont générés automatiquement autour de ton <td> (un <tr> au minimum est généré autour) : https://www.alsacreations.com/tuto/lire/1525-le-modele-tabulaire-en-css.html

Du coup, ton sélecteur d'adjacente "+" ne fonctionne pas, mais cela fonctionne avc le sélecteur d'adjacence général ainsi :

<table>
<tr>
  <input type="radio" id="maintenance2" name="CT" />
  <label for="maintenance2">Maintenance (8-16)</label>
<input type="radio" id="intervention" name="CT" />
  <label for="intervention">Intervention (10-18)</label>
<input type="radio" id="astreinte" name="CT" />
  <label for="astreinte">Astreinte</label>

<td class="Calendaraffichecheck">  
  <p>plopplop</p>
</td>
</tr>
</table>

.Calendaraffichecheck {
	display: none;
  border: 1px solid #000000;
  background: tan;
}
#astreinte:checked ~ * .Calendaraffichecheck {
	display: table-cell;
}

Bonjour Aliasdmc,

Je te remercie, mais je préférerais ne pas passer par Javascript.

Bonjour Raphael,

merci pour ta proposition de script.
Comme pour le mien, les cellules n'apparaissent pas mais quand je sélectionne le 'radio' rien ne se passe.

Je vais lire le tuto que tu as fait et je te fais un retour si je trouve (tout seul ) ou pas la solution.

Xavier
Modifié par Xavier_91 (04 Sep 2018 - 19:48)

C'est bizarre, parce que j'ai testé mon code avant de te le proposer et cela fonctionne chez moi : https://codepen.io/raphaelgoetter/pen/bxRgEp

Je crois comprendre pourquoi.
Je n'avais pas vu que tu as intégré les 'radio' dans la 'table'.

Sur mon projet, les 'radio' sont au dessus.
Je modifie mon script tout à l'heure pour vérifier.

Alors, j'ai intégré les 'radio' dans le tableau mais aucun changement.

J'ai relu ton script et j'ai vue que le 'menu' est intégré au '<tr>' avant le '<td>'.
Dans mon cas, le '<td>' est dans un autre '<tr>'.(voir la capture d'écran)



Cela viendrait de là ?

merci pour ton aide

J'ai l'impression que ton architecture semble bien différente de ce que tu demandes au départ.

Effectivement, avec les sélecteurs CSS tu ne peux pas remonter la branche pour cibler un élément complètement ailleurs (pas avec les sélecteurs d'adjacence + et ~ en tout cas).

Je tente une autre approche, je reviens...

Je pense que je vais revoir la mise en page 'table'

Je reviens dès que c'est fait ...

Merci

Bonjour Xavier_91,

Perso, je pense que cela ne changera pas le pb, tu seras toujours obligé de passer par JS
Tu ne pourras pas le faire en 100% CSS
Mais peut être que je me trompe, en tout cas si tu a une solution 100% CSS
n'hésite pas à la partager

Bonsoir tout le monde,

Comme dit plus haut, je vais me passer du 'table' et passer par des 'div' 'ul' ...
Par contre, je suis très nul en css. Malgré l'aide de Raphael, il n'y a pas grand chose qui fonctionne

le code :

<div id="formulaire"><p>
<input type="radio" id="maintenance1" name="CT" checked />
<label for="maintenance1">Maintenance (7-15)</label>
<input type="radio" id="maintenance2" name="CT" />
<label for="maintenance2">Maintenance (8-16)</label>
<input type="radio" id="intervention" name="CT" />
<label for="intervention">Intervention (10-18)</label>
<input type="radio" id="astreinte" name="CT" />
<label for="astreinte">Astreinte</label>
<input type="radio" id="formation" name="CT" />
<label for="formation">Formation</label>
<input type="radio" id="conge" name="CT" />
<label for="conge">Congé</label>
<input type="radio" id="am" name="CT" />
<label for="am">Arrêt maladie</label>
<input type="radio" id="at" name="CT" />
<label for="at">Accident de travail</label>
<input type="radio" id="deleg" name="CT" />
<label for="deleg">Délégation</label>
</p></div>
<div class="afficheastreinte">&nbsp;</div>
<div class="afficheastreinte2">&nbsp;</div>

le css :

#astreinte:checked + label {font-weight: bold; color: red;}
#astreinte:checked ~ * .afficheastreinte {display: block;}
div#formulaire{
	height: 40px;
	display: flex;
	border-bottom: 1px solid #000000;
	margin: 0 auto;
	width: 100%;
	background-color: #2E2EFE;
	text-align: center;
	color: #FFFFFF;
}
p { margin: auto;}
.afficheastreinte{
	display: none;
	height:100px;
	margin: 0 auto;
	width: 95%;
	background-color: red;
}
.afficheastreinte2{
	height:100px;
	display: flex;
	margin: 0 auto;
	width: 95%;
	background-color: green;
}

Quand je sélectionne 'Astreinte' la police change bien mais le 1er 'div' n’apparaît pas ...

Merci pour votre aide