recherche

Maison  >  Article  >  interface Web  >  Comment sélectionner la ligne actuelle dans jquery

Comment sélectionner la ligne actuelle dans jquery

PHPz
PHPzoriginal
2023-05-11 22:31:36663parcourir

jQuery est une bibliothèque JavaScript très populaire qui peut aider les développeurs à écrire facilement des pages Web hautement interactives et réactives. Dans jQuery, la sélection d'éléments est une opération très courante, et la sélection de la ligne actuelle (également appelée mise en surbrillance de la ligne actuelle) est une exigence importante dans le processus de développement. Dans cet article, nous allons explorer comment sélectionner et styliser la ligne actuelle à l'aide de jQuery.

1. Analyse des exigences

Dans le développement Web, nous utilisons généralement des tableaux pour afficher les données. Lorsque nous déplaçons la souris sur une ligne (tr) du tableau, nous espérons que la ligne sera mise en surbrillance pour rappeler à l'utilisateur la ligne actuellement sélectionnée. Par conséquent, nous devons écrire un morceau de code jQuery pour répondre à cette exigence.

2. Implémentation du code

Dans le processus de réalisation de cette exigence, nous pouvons utiliser la méthode on() et la méthode siblings() de jQuery pour sélectionner la ligne actuelle et y ajouter des styles. Les étapes spécifiques de mise en œuvre sont les suivantes :

  1. Liez un événement de glissement de souris à chaque ligne (tr) du tableau, et l'événement est déclenché lorsque la souris se déplace vers une certaine ligne. 

    $('table tr').on('mouseover', function() {
 // 鼠标滑过事件处理逻辑
});

  2. Dans la logique de traitement des événements, utilisez la méthode siblings() pour sélectionner les éléments frères de la ligne actuelle, puis ajoutez-leur des styles. 

    $('table tr').on('mouseover', function() {
 $(this).siblings().removeClass('currentRow'); // 移除其他行的样式
 $(this).addClass('currentRow'); // 为当前行添加样式
});

  3. Définissez la classe .currentRow en CSS pour définir le style de la ligne actuelle. 

    .currentRow {
 background-color: #f0f0f0;
}

Le principe d'implémentation de ce code est que lorsque la souris glisse sur une certaine ligne, utilisez d'abord la méthode siblings() pour sélectionner les éléments frères de la ligne actuelle, c'est-à-dire les autres lignes, puis utilisez la méthode removeClass () pour supprimer les éléments existants dans d'autres styles de lignes, et enfin utilisez la méthode addClass() pour ajouter un style de surbrillance à la ligne actuelle.

3. Exemple de démonstration

Ce qui suit est un exemple simple pour montrer comment utiliser jQuery pour sélectionner la ligne actuelle et y ajouter des styles. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery选择当前行</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table th, table td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: left;
        }
        .currentRow {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
                <td>北京市海淀区</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>女</td>
                <td>上海市浦东新区</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>22</td>
                <td>男</td>
                <td>广州市天河区</td>
            </tr>
        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $('table tr').on('mouseover', function() {
            $(this).siblings().removeClass('currentRow');
            $(this).addClass('currentRow');
        });
    </script>
</body>
</html>

Dans l'exemple ci-dessus, nous lions l'événement de survol de la souris à chaque ligne du tableau. Lorsque la souris se déplace vers une certaine ligne, utilisez la méthode siblings() pour sélectionner d'autres éléments de la ligne actuelle (c'est-à-dire d'autres lignes) et déplacez-les En plus de ses styles existants, ajoutez enfin un style de surbrillance à la ligne actuelle.

4. Résumé

La sélection de la ligne actuelle est une opération très courante dans le développement Web et peut être facilement implémentée à l'aide de jQuery. En utilisant la méthode on() et la méthode siblings(), nous pouvons sélectionner la ligne actuelle et y ajouter des styles. Dans le même temps, lors de l'ajout de styles à la ligne actuelle, vous devez veiller à définir la classe de style correspondante en CSS pour garantir la facilité de modification du style.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：nodejs installe npm debian 9Article suivant：nodejs installe npm debian 9

Articles Liés

Voir plus