Maison > Article > interface Web > Exemple de code pour jQuery pour réaliser facilement un changement de couleur de ligne alterné des tableaux et cliquer sur changement de couleur de ligne_jquery

Exemple de code pour jQuery pour réaliser facilement un changement de couleur de ligne alterné des tableaux et cliquer sur changement de couleur de ligne_jquery

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

JQuery réalise facilement l'exemple de code consistant à changer la couleur d'une ligne sur deux du tableau et à changer la couleur de la ligne cliquée

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用jquery设置表格样式</title>
<style>
.even{
 background-color:red;
}
.odd{
 background-color:green;
}
.selected{
 background-color:#FF6;
}
.se{
 background-color:#666;
}
</style>
<script language="javascript" src="../../include/jquery.js"></script>
<script>
$(document).ready(function(){
 //隔行表色
 $("tr:even").addClass("even");
 $("tr:odd").addClass("odd");
 
 //点击变色 
 $("tr").toggle(
 function(){
  
  $(this).addClass("selected");
  
 },function (){

  $(this).removeClass("selected");

 }
 );

 //滑动变色
 $("tr").mouseover(function (){
 
 $(this).addClass("se"); 
 
 }).mouseout(function (){
 
 $(this).removeClass("se");
 
 });
 

 
 
 
});
</script>
</head>

<body>
<table width="500" border="1" align="center">
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>


</body>
</html>

L'exemple de code ci-dessus pour jQuery permettant de réaliser facilement le changement de couleur des lignes alternées et des lignes de clic d'un tableau 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 prendrez en charge Script Home. .

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：Exemple d'effet de calque de masque semi-transparent sur la page écrite en JavaScript et cliquez pour agrandir les compétences image_javascriptArticle suivant：Exemple d'effet de calque de masque semi-transparent sur la page écrite en JavaScript et cliquez pour agrandir les compétences image_javascript

Articles Liés

Voir plus