Masquer les lignes du tableau en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Masquer les lignes du tableau en …
Anika Tabassum Era 12 octobre 2023
JavaScript JavaScript Table
  1. Utilisez la fonction toggle() de jQuery pour masquer les lignes du tableau en JavaScript
  2. Utilisez les fonctions show() et hide() de jQuery pour masquer les lignes du tableau en JavaScript
Masquer les lignes du tableau en JavaScript

En JavaScript, nous pouvons définir certaines données de table sous une classe commune qui aura une fonction avec laquelle coopérer. Cette fonction spécifique déclarera comment les lignes de cette table se comportent sur des déclencheurs sélectifs.

En termes simples, un bouton ou une balise de lien déclenchera une fonction qui aura les détails sur le masquage et l’affichage des lignes du tableau.

Ici, dans nos exemples, nous allons nous intéresser à la fonction toggle() de jQuery ainsi qu’aux fonctions show() et hide(). Les deux manières impliquent l’expansion et le rétrécissement des lignes.

Sautons dans les clôtures de code.

Utilisez la fonction toggle() de jQuery pour masquer les lignes du tableau en JavaScript

L’exemple prendra des lignes de tableau et les définira sur display: "none". Et lorsqu’on clique sur une certaine balise anchor, elle redéfinit l’étape actuelle en display: "block".

Ce processus va vice-versa, et ainsi nous obtiendrons le résultat attendu. Les lignes de code suivantes illustrent le reste.

Extrait de code:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<table>
    <tr>
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#" class="toggler" data-prod-cat="1">+</a></td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>120</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>140</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>100</td>
        <td><a href="#" class="toggler" data-prod-cat="2">+</a></td>
    </tr>
    <tr class="cat2" style="display:none">
        <td></td>
        <td>120</td>
    </tr>
    <tr class="cat2" style="display:none">
        <td></td>
        <td>140</td>
    </tr>
</table>

$(document).ready(function() {
  $('.toggler').click(function(e) {
    e.preventDefault();
    $('.cat' + $(this).attr('data-prod-cat')).toggle();
  });
});

Production:

Utilisez la fonction jQuery toggle() pour masquer les lignes du tableau

Utilisez les fonctions show() et hide() de jQuery pour masquer les lignes du tableau en JavaScript

Nous aurons deux cliquables; l’un effectuera la présentation des lignes du tableau et l’autre réduira les lignes. L’exemple précédent avait un cliquable pour faire la tâche d’afficher et de masquer les lignes.

Mais nous aurons une manière distincte de faire la même tâche. Vérifions le bloc de code.

Extrait de code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $(".cat1").hide();
  });
  $("#show").click(function(){
    $(".cat1").show();
  });
});
</script>
</head>
<body>
  <table>
    <tr>
        <td>Oranges</td>
        <td>100</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>120</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>140</td>
    </tr>
    </table>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Production:

Utilisez la fonction jQuery show() et hide() pour masquer les lignes du tableau

Auteur: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Article connexe - JavaScript Table