本文實例講述了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程序設計有所幫助。