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

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

WBOY

Libérer： 2016-05-16 09:00:26

original

1495 Les gens l'ont consulté

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>

Copier après la connexion

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. .