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-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 16:04:47

Original

1836 Leute haben es durchsucht

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>

Nach dem Login kopieren

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