Maison > interface Web > js tutoriel > jquery réalise l'effet de changement de couleur en cliquant sur la ligne correspondante dans le tableau [exemple de code]_jquery

jquery réalise l'effet de changement de couleur en cliquant sur la ligne correspondante dans le tableau [exemple de code]_jquery

WBOY
Libérer: 2016-05-16 15:01:27
original
2073 Les gens l'ont consulté

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>
Copier après la connexion

L'implémentation jquery ci-dessus de la fonction de changement de couleur consistant à cliquer sur la ligne correspondante dans le tableau [exemple de code] est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home. .

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal