Un bouton pour plusieurs lignes | while

Version imprimable

Bonjour,

Je suis confronté à un problème (étonnant !) , je crois que ma logique a complétement foutu le camp.

[Existant] : Je parcours grâce à un while les lignes de ma BDD, que j'affiche sous la forme d'un tableau. Grace aux conseils prodigués sur ce forum, j'ai pu faire en sorte de mettre en place un système de bouton (avec un ptit bout de code js) qui affiche/masque mes lignes par un clique.

[Ce que j'aimerai faire] ; Tout simplement ne mettre qu'un bouton pour toutes les lignes sauf la 1ère.

J'utilise ce qu'il y a ci-dessous dans mon while pour php
Code:

1 2 3 4 5 6 7 8 9 10 while (toutes mes lignes de la BDD) { <button type="button" onclick= "toggle_div(this, 'test-<?php echo $t; ?>')">+</button> <div id="test-<?php echo $t; ?>" style="display:none"> Ma ligne ou il y a mes infos </div> $t = $t+1; }
Et côté js j'ai ça :
Code:

1 2 3 4 function toggle_div( btn, id_div ){ btn.innerHTML = (btn.innerHTML == '+')? '-' : '+'; document.getElementById( id_div ).style.display = (document.getElementById( id_div ).style.display == 'none')? 'block' : 'none'; }
Voila je galère étant donné que j'incrémente de 1 mon ID à chaque tour pour qu'il reste unique et qu'après être passé dans mon while, bah ça recommence donc comment pourrais-je garder en mémoire les div ou les placer dans un bloc de div et ne faire appel qu'au bloc....?

Merci d'avance pour votre aide :)

02/11/2017, 16h37
Geoffrey74

Hello,

Le plus simple, c'est que tu ajoute une classe a tes div, et en js, tu masque ou affiche les div qui ont cette classe.
En JS pure je ne saurai faire, avec jquery c'est relativement simple :)

Sinon, tu peux creer une varible JS qui faut le nombre de div (donc $t si j'ai bien lu)
et tu fais une boucle for pour afficher / masquer les div en partant de test-2 jusque test-$t

Bonjour,

on parle de moi ? ;)

Alors, pour un seul bouton :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<button type="button" onclick= "toggle_all_div(this, 'test');">++</button>	
 
<?php
$t = 1;
while (toutes mes lignes de la BDD) {
?>
<div <?php if( $t != 1 ){ echo ' class="test"'; } ?> style="display:none">
   Ma ligne ou il y a mes infos
</div>
<?php
$t++   // équivaut à : $t = $t+1;
}

Code:

1
2
3
4
5
6
function toggle_all_div(btn, class_div) {
  btn.innerHTML = btn.innerHTML == "++" ? "--" : "++";
  document.querySelectorAll('.'+class_div).forEach(function(this_div) {
    this_div.style.display = this_div.style.display == "none" ? "block" : "none";
  });
}

OU :

Code:

1
2
3
4
5
6
7
function toggle_all_div(btn, class_div) {
  btn.innerHTML = (btn.innerHTML == "++") ? "--" : "++";
  document.querySelectorAll("." + class_div).forEach(function(this_div) {
    this_div.style.display =
      (btn.innerHTML == "--") ? "block" : "none";
  });
}

03/11/2017, 09h40
-Rpass-

jreaux62 je crois qu'il veut un bouton pour par ligne pour afficher/masquer la ligne, et non un bouton pour toutes les lignes. Ou alors il s'est mal expliqué.
03/11/2017, 09h43
Brezhoneg17

Bonjour,

Tout d'abord merci à vous pour ces pistes ! En effet merci encore jreaux62 :) !
Le code en se basant sur la class fonctionne, et c'est super ! Néanmoins (sinon ça ne serait pas marrant), mon while est un peu plus complexe et je suis de nouveau coincé... :roll:

En fait dans ce dernier je fais un if qui me permet de savoir si la ligne est une famille ou une sous famille. Si c'est une famille je l'affiche directement avec de la couleur sans bouton (cette partie fonctionne), sinon je met un seul bouton pour toutes les sous familles regroupées, sachant que tout cela est sous la forme de tableaux.

Le problème avec la class est qu'actuellement quand je clic sur + et - cela m'affiche toutes les sous familles de toutes les familles... Et non pas de la famille dans laquelle je me trouve... Voila le cœur de mon problème! :(

Je suis preneur de toutes idées à nouveau... :)
03/11/2017, 10h05
Brezhoneg17

[UP]

C'est booooon !!! Miraaaacle * cafetière qui applaudit * !
J'ai tout simplement fait le même chemin qu'avec l'ID, mais avec la class.

Si c'est une Famille, je l'affiche,
je créer un bouton (vu que je sais que ça va enchainer Sous Famille), et j'incrémente de 1 ma class= $i

Sinon (donc sous famille)
j'affiche dans un 'div class = $i' les données.

Voila merci pour votre aide et votre réactivité :)

A bientôt
03/11/2017, 11h29
Invité

Bonjour,

ce serait bien de montrer ton code final.
Ça pourrait intéresser certains.

@-Rpass-
Le cas "un bouton par ligne" avait déjà été traité - et résolu - dans cette discussion ;)