Maison > Article > interface Web > Comment changer la couleur des lignes alternatives dans un tableau javascript et ajouter des mouvements de souris vers l'intérieur et l'extérieur et cliquer sur les compétences d'effets_javascript

Comment changer la couleur des lignes alternatives dans un tableau javascript et ajouter des mouvements de souris vers l'intérieur et l'extérieur et cliquer sur les compétences d'effets_javascript

WBOYoriginal: 2016-05-16 16:04:471840parcourir

L'exemple de cet article décrit comment changer la couleur des lignes alternées dans un tableau javascript et ajouter des effets de mouvement d'entrée et de sortie de la souris et de clic. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Le tableau change de couleur toutes les deux lignes, ce qui est également un effet js qui améliore l'expérience utilisateur.

Mise en œuvre de l'effet :

Les lignes paires et impaires du tableau ont des couleurs différentes. Cela empêche les utilisateurs de voir les données en série.
La couleur change lorsque la souris se déplace dans une rangée et revient lorsque la souris la quitte. Cela permet aux utilisateurs de savoir clairement quelle ligne ils consultent.

Cliquez sur le tableau pour changer de couleur. Il est pratique pour les utilisateurs de sélectionner les éléments qu’ils souhaitent conserver.

Description :

i%2 Chaque nombre modulo 2 n'a que deux valeurs : 0 et 1, afin que l'effet de changement de couleur entrelacé puisse être obtenu
tables_li[i].onoff = 1; Afin d'obtenir un changement de couleur par clic, la couleur ne sera pas écrasée lorsque la souris entre et sort.

Télécharger le code :

<!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=gb2312"/>
<title>无标题文档</title>
<style>
table{
border-collapse:collapse
}
table td{
height:26px;
font-size:12px;
color:#333;
border:1px solid #09c;
text-align:center;
padding:0 10px;
}
</style>
</head>
<body>
<script>
window.onload = function(){
 var tables = document.getElementById("tables");
 var tables_li = tables.getElementsByTagName("tr");
 var i=0;
 var len = tables_li.length;
 for(i=0; i<len; i++){
  tables_li[i].onoff = 1;
  tables_li[i].index = i;
  tables_li[i].style.backgroundColor = i%2&#63;"#ace":"";
  tables_li[i].onmouseover = function(){
   if(this.onoff == 1){
   this.style.backgroundColor = "#06c";
   }
  }
  tables_li[i].onmouseout = function(){
   if(this.onoff == 1){
    this.style.backgroundColor = this.index%2&#63;"#ace":"";
   }
  }
  tables_li[i].onclick = function(){
   if(this.onoff == 1){
    this.onoff = 0;
    this.style.backgroundColor = "#069";
   }else{
    this.onoff = 1;
    this.style.backgroundColor = this.index%2&#63;"#ace":"";
   }
  }
 }
}
</script>
<table width="500" border="0" align="center"
cellpadding="0" cellspacing="0" id="tables">
 <tr>
 <td>1</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>2</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>3</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>4</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>5</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>6</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>7</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>8</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>9</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>10</td>
 <td>内容内容</td>
 </tr>
</table>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

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：Le plug-in jQuery Tooltipster implémente un bel outil tips_jqueryArticle suivant：Le plug-in jQuery Tooltipster implémente un bel outil tips_jquery

Articles Liés

Voir plus