jquery définit dynamiquement tr pour afficher et masquer

Avec une grande quantité de données et d'informations affichées sur les pages Web, les barres de défilement et la pagination ne peuvent plus répondre à nos besoins. Par conséquent, nous avons besoin de meilleurs moyens d’afficher et de masquer les données. Cet article explique comment utiliser jQuery pour définir dynamiquement l'affichage et le masquage de tr, et afficher ou masquer directement les données dans le tableau.

1. Vider la table

Dans le processus de mise dynamique de la table, il est préférable de débarrasser la table en premier. Utilisez le code suivant pour effacer le tableau :

$("#myTable tbody tr").remove();

Parmi eux, #myTable est l'ID de table que vous souhaitez utiliser, tbody représente le corps de la table et tr est la ligne du tableau.

2. Afficher toutes les lignes

Pour afficher toutes les lignes du tableau, vous pouvez utiliser le code suivant :

$("#myTable tbody tr").show();

De cette façon, toutes les lignes du tableau seront affichées.

3. Masquer toutes les lignes

Pour masquer toutes les lignes d'un tableau, vous pouvez utiliser le code suivant :

$("#myTable tbody tr").hide();

Cela masquera toutes les lignes du tableau.

4. Afficher les lignes selon les conditions

Utilisez le code suivant pour afficher les lignes selon les conditions :

$("#myTable tbody tr").filter(function () {
    return $(this).text().indexOf("条件") !== -1;
}).show();

Parmi elles, les conditions peuvent être modifiées selon vos besoins. Cette méthode peut afficher des lignes en fonction de critères spécifiques, tels que le contenu du texte, la classe ou d'autres attributs.

5. Masquer les lignes en fonction des conditions

Utilisez le code suivant pour masquer les lignes en fonction des conditions :

$("#myTable tbody tr").filter(function () {
    return $(this).text().indexOf("条件") !== -1;
}).hide();

Cela masquera les lignes en fonction des conditions spécifiées.

6. Rechercher des lignes

Utilisez le code jQuery suivant pour rechercher des lignes de tableau :

$("#myTable tbody tr").each(function () {
    var rowText = $(this).text().toLowerCase();
    $('input[type="text"]').keyup(function () {
        if ($(this).val().toLowerCase() === "" || rowText.indexOf($(this).val().toLowerCase()) !== -1) {
            $(this).closest("tr").show();
        } else {
            $(this).closest("tr").hide();
        }
    });
});

Ce code parcourt d'abord toutes les lignes du tableau et recherche après avoir saisi du texte dans la zone de saisie. Si la zone de texte n'a pas de contenu, toutes les lignes sont affichées ; si une correspondance est trouvée, seules les lignes correspondantes sont affichées, sinon toutes les lignes restantes sont masquées ;

7. Résumé

En utilisant jQuery, il est très simple de définir dynamiquement l'affichage et le masquage des lignes du tableau. Cet article explique comment effacer un tableau, afficher ou masquer toutes les lignes, afficher ou masquer les lignes de manière conditionnelle et comment rechercher des lignes dans un tableau. Ces techniques permettent de mieux afficher les données et d'améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!