Maison > Article > interface Web > jquery réalise la fonction de changement de couleur en cliquant sur la ligne correspondante dans le tableau

jquery réalise la fonction de changement de couleur en cliquant sur la ligne correspondante dans le tableau

WBOYoriginal: 2016-05-16 09:00:183305parcourir

Pour un tableau, afin de faciliter la distinction des éléments sélectionnés, nous devons ajouter des surlignages aux éléments sélectionnés, et également supprimer la surbrillance des autres éléments. Semblable à :

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.3.2.min.js"></script>
    <script>
        $(function () {
            $('tbody>tr').click(function () {
                $(this).addClass('selected')      //为选中项添加高亮
                .siblings().removeClass('selected')//去除其他项的高亮形式
                .end();
            });
        }); 
    </script></head><body>
    <table>
        <thead>
            <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
        </tbody>
    </table></body></html>

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：Explication détaillée de la méthode de conversion d'objet jQuery et d'objet DOM_jqueryArticle suivant：Explication détaillée de la méthode de conversion d'objet jQuery et d'objet DOM_jquery

Articles Liés

Voir plus