Comment modifier la table avec jquery

Ces dernières années, avec le développement rapide de la technologie Web, jQuery est devenue l'une des bibliothèques JavaScript les plus populaires dans le développement front-end. Cela peut nous aider à gérer plus facilement les documents HTML, à exploiter les éléments DOM, à gérer les événements, etc.

Dans le processus de développement Web, les tableaux sont un moyen important d'afficher les données. Cependant, nous devons parfois modifier et éditer le formulaire. jQuery nous fournit des fonctions puissantes qui peuvent nous aider à modifier facilement les tables. Nous expliquerons ensuite comment modifier la table avec jquery.

1. Ajoutez dynamiquement des lignes de tableau

Normalement, certaines lignes de tableau dans notre page doivent être ajoutées ou supprimées en temps réel. Par exemple, dans une liste de panier sur un site Web commercial, les utilisateurs peuvent ajouter ou supprimer des articles dans le panier. À ce stade, il serait très long et fastidieux d’ajouter et de supprimer manuellement des lignes de tableau à chaque fois. jQuery nous fournit des méthodes telles que "append()", "prepend()", "after()" et "before()", qui peuvent facilement ajouter et supprimer des lignes de tableau de manière dynamique.

Par exemple, si nous voulons ajouter une ligne au tableau, nous pouvons utiliser le code suivant :

$("table").append("<tr><td>新行数据 1</td><td>新行数据 2</td></tr>");

Après avoir exécuté le code ci-dessus, une ligne sera ajoutée à la dernière ligne du tableau. Le contenu de cette ligne est "nouvelles données de ligne 1" et "nouvelles données de ligne 2".

2. Fonctionnement dynamique des données du tableau

Parfois, nous devons modifier les données d'un tableau existant, comme par exemple les données d'une colonne du tableau doivent être mises à jour . jQuery fournit les méthodes "text()" et "html()" pour modifier facilement les données des tables.

Par exemple, si on souhaite modifier les données de la deuxième colonne du tableau, on peut utiliser le code suivant :

$("table tr td:nth-child(2)").text("新的数据");

Le code ci-dessus mettra à jour toutes les données dans la deuxième colonne du tableau sur "Nouvelles données".

3. Implémenter la fonction de tri des tableaux

S'il existe un tableau avec beaucoup de données, une fonction de tri des tableaux sera généralement fournie afin que les utilisateurs puissent facilement visualiser et comparer les données . Ici, nous pouvons utiliser la méthode "sortable" de la bibliothèque jQuery UI pour implémenter la fonction de tri des tables très simplement.

Par exemple, nous avons le tableau suivant :

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>25</td>
            <td>女</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小芳</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

On peut trier le tableau grâce au code suivant :

$(function(){
    $("table tbody").sortable({
        placeholder : "ui-state-highlight"
    });
});

Parmi eux, "triable" () "La fonction ajoutera une fonction déplaçable au tableau et triera automatiquement les lignes déplacées, où "espace réservé" est un espace réservé. Lorsqu'une ligne est déplacée, la position occupée sera temporairement occupée par cet espace réservé.

Une fois le code ci-dessus exécuté, les lignes du tableau peuvent être déplacées à volonté, réalisant ainsi la fonction de tri du tableau.

4. Recherche en temps réel des données des tableaux

Dans certains tableaux contenant de grandes quantités de données, nous pouvons fournir une fonction de recherche pour permettre aux utilisateurs de localiser rapidement les données dont ils ont besoin à trouver. Ici, nous pouvons utiliser la méthode « filtre » de jQuery pour réaliser une recherche en temps réel des données de la table.

Par exemple, nous avons le tableau suivant :

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>25</td>
            <td>女</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小芳</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

Nous pouvons utiliser le code suivant pour implémenter la recherche en temps réel des données du tableau :

$(function(){
    $("#search_input").keyup(function(){
        var keyword = $(this).val();
        $("table tbody tr").hide().filter(":contains('"+ keyword +"')").show();
    });
});

#🎜🎜 #Dans le code ci-dessus, la méthode "keyup()" surveille les modifications dans la zone de saisie du champ de recherche et est déclenchée lorsque vous appuyez sur le clavier. Ensuite, récupérez les mots-clés dans la zone de saisie, filtrez les lignes correspondantes via "filter()", et enfin affichez les résultats de la recherche via "show()".

Grâce aux méthodes ci-dessus, nous pouvons facilement modifier, trier, rechercher et d'autres opérations sur le tableau pour améliorer l'expérience utilisateur de la page.

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!