本文實例講述了javascript表格隔行變色加鼠標移入移出及點擊效果的方法。分享給大家供大家參考。具體分析如下：
表格隔行變色，也是一個提高用戶體驗的js效果。
效果實現：
表格奇偶行的顏色不一樣。這樣可以防止用戶看數據時串行。
鼠標移入某行時變顏色，移出再變回來。這樣可以讓用戶清楚的知道自己正在看哪一行。
表格點擊變色。便于用戶選中自己想保留的項。
說明：
i%2 每個數和2取模的值，只有0和1兩種，這樣就可以實現隔行變色的效果
tables_li[i].onoff = 1; 為了實現點擊變色，鼠標移入移出時，顏色不被覆蓋。
上代碼:
<!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?"#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>內容內容</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>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
