快捷導(dǎo)航

javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法

更新時(shí)間：2015年04月10日 12:14:26 作者：jingangel

這篇文章主要介紹了javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法,涉及javascript實(shí)現(xiàn)隔行變色及鼠標(biāo)點(diǎn)擊效果的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法。分享給大家供大家參考。具體分析如下：

表格隔行變色，也是一個(gè)提高用戶體驗(yàn)的js效果。

效果實(shí)現(xiàn)：

表格奇偶行的顏色不一樣。這樣可以防止用戶看數(shù)據(jù)時(shí)串行。
鼠標(biāo)移入某行時(shí)變顏色，移出再變回來。這樣可以讓用戶清楚的知道自己正在看哪一行。

表格點(diǎn)擊變色。便于用戶選中自己想保留的項(xiàng)。

說明：

i%2 每個(gè)數(shù)和2取模的值，只有0和1兩種，這樣就可以實(shí)現(xiàn)隔行變色的效果
tables_li[i].onoff = 1; 為了實(shí)現(xiàn)點(diǎn)擊變色，鼠標(biāo)移入移出時(shí)，顏色不被覆蓋。

上代碼:

<!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>無標(biāo)題文檔</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?"#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?"#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?"#ace":"";
   }
  }
 }
}
</script>
<table width="500" border="0" align="center"
cellpadding="0" cellspacing="0" id="tables">
 <tr>
 <td>1</td>
 <td>內(nèi)容內(nèi)容</td>
 </tr>
 <tr>
 <td>2</td>
 <td>內(nèi)容內(nèi)容</td>
 </tr>
 <tr>
 <td>3</td>
 <td>內(nèi)容內(nèi)容</td>
 </tr>
 <tr>
 <td>4</td>
 <td>內(nèi)容內(nèi)容</td>
 </tr>
 <tr>
 <td>5</td>
 <td>內(nèi)容內(nèi)容</td>
 </tr>
 <tr>
 <td>6</td>
 <td>內(nèi)容內(nèi)容</td>
 </tr>
 <tr>
 <td>7</td>
 <td>內(nèi)容內(nèi)容</td>
 </tr>
 <tr>
 <td>8</td>
 <td>內(nèi)容內(nèi)容</td>
 </tr>
 <tr>
 <td>9</td>
 <td>內(nèi)容內(nèi)容</td>
 </tr>
 <tr>
 <td>10</td>
 <td>內(nèi)容內(nèi)容</td>
 </tr>
</table>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: