Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar warna baris ganti dalam jadual javascript dan menambah pergerakan tetikus masuk dan keluar dan klik kemahiran effect_javascript

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

WBOYasal: 2016-05-16 16:04:471843semak imbas

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>

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

Kenyataan：

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

Artikel sebelumnya：jQuery plug-in Tooltipster melaksanakan tips_jquery alat yang cantikArtikel seterusnya：jQuery plug-in Tooltipster melaksanakan tips_jquery alat yang cantik

Artikel berkaitan

Lihat lagi