Heim > Artikel > Web-Frontend > So ändern Sie die Farbe alternativer Zeilen in einer Javascript-Tabelle und fügen Mausbewegungen nach innen und außen hinzu und klicken auf Effekte_Javascript-Fähigkeiten

So ändern Sie die Farbe alternativer Zeilen in einer Javascript-Tabelle und fügen Mausbewegungen nach innen und außen hinzu und klicken auf Effekte_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 16:04:471838Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie man die Farbe alternativer Zeilen in einer Javascript-Tabelle ändert und Mausbewegungen nach innen und außen sowie Klickeffekte hinzufügt. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Die Farbe der Tabelle ändert sich in jeder zweiten Zeile, was ebenfalls ein JS-Effekt ist, der die Benutzererfahrung verbessert.

Effektumsetzung:

Die ungeraden und geraden Zeilen der Tabelle haben unterschiedliche Farben. Dies verhindert, dass Benutzer Daten seriell sehen.
Die Farbe ändert sich, wenn die Maus in eine Zeile hinein bewegt wird, und ändert sich wieder, wenn die Maus heraus bewegt wird. Dadurch können Benutzer eindeutig erkennen, welche Zeile sie gerade betrachten.

Klicken Sie auf die Tabelle, um die Farbe zu ändern. Für Benutzer ist es praktisch, die Elemente auszuwählen, die sie behalten möchten.

Beschreibung:

i%2 Jede Zahl Modulo 2 hat nur zwei Werte: 0 und 1, sodass der Effekt einer interlaced-Farbänderung erzielt werden kann
tables_li[i].onoff = 1; Um eine Änderung der Klickfarbe zu erreichen, wird die Farbe nicht überschrieben, wenn die Maus hinein- und herausbewegt wird.

Code hochladen:

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

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Das jQuery-Plug-in Tooltipster implementiert das schöne Tooltips_jqueryNächster Artikel：Das jQuery-Plug-in Tooltipster implementiert das schöne Tooltips_jquery

In Verbindung stehende Artikel

Mehr sehen