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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan