javascript表格隔行變色加鼠標移入移出及點擊效果的方法
本文實例講述了javascript表格隔行變色加鼠標移入移出及點擊效果的方法。分享給大家供大家參考。具體分析如下:
表格隔行變色,也是一個提高用戶體驗的js效果。
效果實現(xiàn):
表格奇偶行的顏色不一樣。這樣可以防止用戶看數(shù)據(jù)時串行。
鼠標移入某行時變顏色,移出再變回來。這樣可以讓用戶清楚的知道自己正在看哪一行。
表格點擊變色。便于用戶選中自己想保留的項。
說明:
i%2 每個數(shù)和2取模的值,只有0和1兩種,這樣就可以實現(xiàn)隔行變色的效果
tables_li[i].onoff = 1; 為了實現(xiàn)點擊變色,鼠標移入移出時,顏色不被覆蓋。
上代碼:
<!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>內(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>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
trackingjs+websocket+百度人臉識別API實現(xiàn)人臉簽到
這篇文章主要介為大家詳細紹了trackingjs+websocket+百度人臉識別API實現(xiàn)人臉簽到功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11JavaScript實現(xiàn)移動端短信驗證碼流程介紹
這篇文章主要為大家詳細介紹了javascript實現(xiàn)移動端發(fā)送短信驗證碼案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-10-10怎樣在CocosCreator中使用物理引擎關(guān)節(jié)
這篇文章主要介紹了怎樣在CocosCreator中使用物理引擎關(guān)節(jié),對物理引擎感興趣的同學,著重要看一下2021-04-04