Masquer les lignes du tableau en JavaScript

Pour masquer puis afficher des lignes de tableau sélectionnées après un clic, regroupez-les sous une classe commune et ciblez cette classe avec jQuery. Utilisez toggle() pour qu’un même contrôle alterne entre les deux états, ou hide() et show() si vous préférez des contrôles distincts. Les exemples ci-dessous nécessitent le chargement de jQuery. Le JavaScript du navigateur peut également modifier la visibilité via le DOM et CSS ; jQuery fournit des méthodes pratiques pour sélectionner et mettre à jour les éléments.

Utiliser la fonction toggle() de jQuery pour masquer des lignes de tableau en JavaScript

Attribuez une classe de catégorie à chaque groupe de lignes de détail et indiquez cette catégorie dans l’attribut data-prod-cat du contrôle correspondant. Chaque déclencheur reste ainsi associé uniquement aux lignes qu’il doit cibler. Les lignes sont masquées au départ avec style="display:none", ce qui permet aux méthodes d’affichage de jQuery de les révéler ; évitez d’ajouter une règle CSS distincte qui les maintiendrait masquées. Le gestionnaire de clic empêche un lien de naviguer vers #.

Comme dans l’exemple, chargez le script jQuery avant le code qui utilise $. Le rappel ready attend que le balisage du document soit disponible avant d’attacher les gestionnaires, mais il ne peut pas compenser un chargement de jQuery manquant ou échoué. Pour ajouter des catégories, gardez les noms de classe et les valeurs des attributs cohérents : la valeur 3 sélectionne .cat3, sans affecter les classes de lignes sans rapport. Si votre contrôle est un bouton, conservez type="button" afin qu’il ne soumette pas le formulaire qui l’entoure.

Exécutez cet exemple :

const rows = [
  { category: 1, visible: false },
  { category: 1, visible: false },
  { category: 2, visible: false }
];

function toggleCategory(category) {
  for (const row of rows) {
    if (row.category === category) row.visible = !row.visible;
  }
}

toggleCategory(1);
console.log(rows.map(row => row.visible ? "shown" : "hidden").join(", "));

shown, shown, hidden

Cette petite illustration en JavaScript montre la logique de correspondance des catégories. Dans le navigateur, jQuery applique le même principe aux lignes du tableau :

<table>
  <tbody>
    <tr>
      <th scope="row">Oranges</th><td>100</td>
      <td><a href="#" class="toggler" data-prod-cat="1">Toggle oranges</a></td>
    </tr>
    <tr class="cat1" style="display:none"><td></td><td>120</td><td></td></tr>
    <tr class="cat1" style="display:none"><td></td><td>140</td><td></td></tr>
    <tr>
      <th scope="row">Apples</th><td>100</td>
      <td><a href="#" class="toggler" data-prod-cat="2">Toggle apples</a></td>
    </tr>
    <tr class="cat2" style="display:none"><td></td><td>120</td><td></td></tr>
    <tr class="cat2" style="display:none"><td></td><td>140</td><td></td></tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $(".toggler").on("click", function (event) {
    event.preventDefault();
    const category = $(this).attr("data-prod-cat");
    $(".cat" + category).toggle();
  });
});
</script>

Le sélecteur est construit à partir de la catégorie du lien cliqué : le contrôle affiché sous le libellé « Toggle oranges » ne concerne donc que .cat1. Ce libellé reste en anglais dans l’exemple. Le second exemple conserve également en anglais ses libellés visibles « Hide rows » et « Show rows ». Un nouveau clic sur le premier contrôle masque ces lignes. La classe de chaque ligne de détail doit correspondre exactement à la valeur de la catégorie ; si une ligne porte une autre classe, le sélecteur ne la trouvera pas. Si le contrôle ne sert pas à naviguer, utilisez plutôt <button type="button"> qu’un lien ; preventDefault() devient alors inutile. Comme ces lignes sont initialement en display:none, le premier clic les affiche et le suivant les masque. Pour qu’elles soient visibles au départ, supprimez ce style initial : le premier clic les masquera alors.

Utiliser les fonctions show() et hide() de jQuery pour masquer des lignes de tableau en JavaScript

Choisissez des contrôles distincts lorsque l’action doit être explicite plutôt que de changer à chaque clic. Conservez la même classe sur les lignes ciblées par les deux contrôles et masquez-les initialement avec display:none pour que le premier affichage puisse les révéler. Si les lignes doivent être visibles dès le départ, omettez ce style ; le contrôle de masquage produira alors le premier changement. Si le tableau comporte plusieurs groupes, les contrôles peuvent cibler une classe propre à une catégorie plutôt que .detail-row.

<table>
  <tbody>
    <tr><th scope="row">Oranges</th><td>100</td></tr>
    <tr class="detail-row" style="display:none"><td>Extra quantity</td><td>120</td></tr>
    <tr class="detail-row" style="display:none"><td>Reserve quantity</td><td>140</td></tr>
  </tbody>
</table>
<button id="hide-rows" type="button">Hide rows</button>
<button id="show-rows" type="button">Show rows</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $("#hide-rows").on("click", function () {
    $(".detail-row").hide();
  });
  $("#show-rows").on("click", function () {
    $(".detail-row").show();
  });
});
</script>

hide() définit l’affichage des lignes sélectionnées sur none ; show() rétablit un état d’affichage adapté à la mise en page d’un tableau. N’utilisez pas display: block comme méthode générale pour révéler une ligne : cela ne respecte pas sa disposition normale dans le tableau. Puisque ces lignes sont masquées au départ, le contrôle d’affichage les révèle et peut être cliqué de nouveau sans risque ; le contrôle de masquage les masque explicitement. À l’inverse, toggle() inverse l’état courant à chaque clic et convient donc à un contrôle unique qui alterne. Choisissez les contrôles distincts show() et hide() lorsque les utilisateurs ont besoin de commandes directes, par exemple pour pouvoir toujours afficher un groupe après l’avoir masqué.