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ì)有所幫助。
您可能感興趣的文章:
- JS控制表格隔行變色
- javascript實(shí)現(xiàn)table表格隔行變色的方法
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過表格行變色的方法
- 原生JS操作網(wǎng)頁給p元素添加onclick事件及表格隔行變色
- 一個(gè)簡單但常用的javascript表格樣式_鼠標(biāo)劃過行變色 簡潔實(shí)現(xiàn)
- javascript基于jQuery的表格懸停變色/恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox
- 高效的表格行背景隔行變色及選定高亮的JS代碼
- 用JS控制表格的逐行變色的表單
- js兼容標(biāo)準(zhǔn)的表格變色效果
- JS實(shí)現(xiàn)表格隔行變色
相關(guān)文章
這篇文章主要介紹了JS樣式獲取的封裝方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了小程序跳轉(zhuǎn)H5頁面的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章為大家推薦了許多經(jīng)典的JS閉包面試題，也可以說是一不小心就做錯(cuò)的JS閉包面試題，感興趣的小伙伴們可以參考一下，自己試著解答這些大部分人都會(huì)做錯(cuò)的JS閉包面試題，檢驗(yàn)自己的知識(shí)水平2015-11-11
這篇文章主要介紹了js對(duì)象基礎(chǔ),以實(shí)例形式分析了js對(duì)象的創(chuàng)建、讀取及遍歷等技巧,需要的朋友可以參考下2015-01-01
trackingjs+websocket+百度人臉識(shí)別API實(shí)現(xiàn)人臉簽到
這篇文章主要介為大家詳細(xì)紹了trackingjs+websocket+百度人臉識(shí)別API實(shí)現(xiàn)人臉簽到功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了ES6新特性中的let和const命令,結(jié)合實(shí)例形式分析了let和const命令的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
JS實(shí)現(xiàn)的走迷宮小游戲完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的走迷宮小游戲,涉及javascript鍵盤事件響應(yīng)及頁面元素動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
JavaScript實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼流程介紹
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動(dòng)端發(fā)送短信驗(yàn)證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-10-10
怎樣在CocosCreator中使用物理引擎關(guān)節(jié)
這篇文章主要介紹了怎樣在CocosCreator中使用物理引擎關(guān)節(jié)，對(duì)物理引擎感興趣的同學(xué)，著重要看一下2021-04-04
下面小編就為大家?guī)硪黄鷍s獲取left值和top值的三種方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08