Bagaimana untuk menukar warna baris ganti dalam jadual javascript dan menambah pergerakan tetikus masuk dan keluar dan klik kemahiran effect

Bagaimana untuk menukar warna baris ganti dalam jadual javascript dan menambah pergerakan tetikus masuk dan keluar dan klik kemahiran effect_javascript

WBOY

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

asal

1836 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara menukar warna baris ganti dalam jadual javascript dan menambah pergerakan tetikus masuk dan keluar serta kesan klik. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Jadual bertukar warna pada setiap baris lain, yang juga merupakan kesan js yang meningkatkan pengalaman pengguna.

Pelaksanaan kesan:

Barisan ganjil dan genap pada meja mempunyai warna yang berbeza. Ini menghalang pengguna daripada melihat data secara bersiri.
Warna berubah apabila tetikus bergerak ke dalam satu baris, dan berubah kembali apabila tetikus bergerak keluar. Ini membolehkan pengguna mengetahui dengan jelas baris mana yang mereka lihat.

Klik pada jadual untuk menukar warna. Ia adalah mudah untuk pengguna memilih item yang mereka ingin simpan.

Penerangan:

i%2 Setiap modulo nombor 2 hanya mempunyai dua nilai: 0 dan 1, supaya kesan perubahan warna berjalin dapat dicapai
tables_li[i].onoff = 1; Untuk mencapai perubahan warna klik, warna tidak akan ditimpa apabila tetikus bergerak masuk dan keluar.

Kod muat naik:

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

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.