鼠標(biāo)經(jīng)過tr時(shí),改變tr當(dāng)前背景顏色
更新時(shí)間:2014年01月13日 10:11:04 作者:
本篇文章主要介紹了鼠標(biāo)經(jīng)過tr時(shí),改變tr當(dāng)前背景顏色的示例代碼,需要的朋友可以過來參考下,希望對(duì)大家有所幫助
示例如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>鼠標(biāo)經(jīng)過給tr換顏色</title>
</head>
<body>
<table align="center" width="100%" border="1" cellspacing="1" cellpadding="1" >
<tr style="cursor:hand " onmousemove="changeTrColor(this)">
<td align="center">1</td>
<td height="20"> 123</td>
<td height="20"> abvx</td>
<td height="20"> 465465</td>
<td height="20">546654654</td>
</tr>
<tr style="cursor:hand " onmousemove="changeTrColor(this)">
<td align="center">1</td>
<td height="20"> 123</td>
<td height="20"> abvx</td>
<td height="20"> 465465</td>
<td height="20">546654654</td>
</tr>
<tr style="cursor:hand " onmousemove="changeTrColor(this)">
<td align="center">1</td>
<td height="20"> 123</td>
<td height="20"> abvx</td>
<td height="20"> 465465</td>
<td height="20">546654654</td>
</tr>
</table>
<script type="text/javascript">
function changeTrColor(obj){
var _table=obj.parentNode;
for (var i=0;i<_table.rows.length;i++){
_table.rows[i].style.backgroundColor="";
}
obj.style.backgroundColor="blue";
}
</script>
</form>
</body>
</html>
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>鼠標(biāo)經(jīng)過給tr換顏色</title>
</head>
<body>
<table align="center" width="100%" border="1" cellspacing="1" cellpadding="1" >
<tr style="cursor:hand " onmousemove="changeTrColor(this)">
<td align="center">1</td>
<td height="20"> 123</td>
<td height="20"> abvx</td>
<td height="20"> 465465</td>
<td height="20">546654654</td>
</tr>
<tr style="cursor:hand " onmousemove="changeTrColor(this)">
<td align="center">1</td>
<td height="20"> 123</td>
<td height="20"> abvx</td>
<td height="20"> 465465</td>
<td height="20">546654654</td>
</tr>
<tr style="cursor:hand " onmousemove="changeTrColor(this)">
<td align="center">1</td>
<td height="20"> 123</td>
<td height="20"> abvx</td>
<td height="20"> 465465</td>
<td height="20">546654654</td>
</tr>
</table>
<script type="text/javascript">
function changeTrColor(obj){
var _table=obj.parentNode;
for (var i=0;i<_table.rows.length;i++){
_table.rows[i].style.backgroundColor="";
}
obj.style.backgroundColor="blue";
}
</script>
</form>
</body>
</html>
您可能感興趣的文章:
- 兼容ie和firefox的鼠標(biāo)經(jīng)過(onmouseover和onmouseout)實(shí)現(xiàn)--簡短版
- js實(shí)現(xiàn)圖片顯示局部,鼠標(biāo)經(jīng)過顯示全部的效果
- Javascript實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)播放聲音
- 鼠標(biāo)經(jīng)過導(dǎo)航菜單時(shí)顏色改變效果
- javascript學(xué)習(xí)筆記(二) 鼠標(biāo)經(jīng)過時(shí),改變div塊的背景色的代碼
- javascript中onmouse事件在div中失效問題的解決方法
- jquery插件實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片右側(cè)顯示大圖的效果(類似淘寶)
- 鼠標(biāo)經(jīng)過顯示二級(jí)菜單js特效
- CSS鼠標(biāo)響應(yīng)事件經(jīng)過、移動(dòng)、點(diǎn)擊示例介紹
- jquery左右滾動(dòng)焦點(diǎn)圖banner圖片鼠標(biāo)經(jīng)過顯示上下頁按鈕
- jquery給圖片添加鼠標(biāo)經(jīng)過時(shí)的邊框效果
- jquery簡單實(shí)現(xiàn)鼠標(biāo)經(jīng)過導(dǎo)航條改變背景圖
- Jquery中國地圖熱點(diǎn)效果-鼠標(biāo)經(jīng)過彈出提示層信息的簡單實(shí)例
- jq實(shí)現(xiàn)酷炫的鼠標(biāo)經(jīng)過圖片翻滾效果
- jQuery 鼠標(biāo)經(jīng)過(hover)事件的延時(shí)處理示例
- 使用mouse事件實(shí)現(xiàn)簡單的鼠標(biāo)經(jīng)過特效
相關(guān)文章
用js動(dòng)態(tài)添加html元素,以及屬性的簡單實(shí)例
下面小編就為大家?guī)硪黄胘s動(dòng)態(tài)添加html元素,以及屬性的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
javascript 動(dòng)態(tài)加載 css 方法總結(jié)
有時(shí)候我們?cè)谠O(shè)計(jì)網(wǎng)頁的時(shí)候想動(dòng)態(tài)的加載css文件,并不是將css文件寫死在頁面中,這時(shí)就可以使用下面方法.2009-07-07
js實(shí)現(xiàn)數(shù)組轉(zhuǎn)樹示例
這篇文章主要為大家介紹了js實(shí)現(xiàn)數(shù)組轉(zhuǎn)樹示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06
webpack4 optimization使用總結(jié)
這篇文章主要介紹了webpack4 optimization使用總結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
javascript中JSON.parse()與eval()解析json的區(qū)別
這篇文章主要介紹了javascript中JSON.parse()與eval()解析json的區(qū)別,詳細(xì)描述了json格式數(shù)據(jù)的操作技巧,并結(jié)合實(shí)例形式對(duì)比分析了使用JSON.parse()與eval()解析json的區(qū)別,需要的朋友可以參考下2016-05-05
javascript設(shè)計(jì)模式之Adapter模式【適配器模式】實(shí)現(xiàn)方法示例
這篇文章主要介紹了javascript設(shè)計(jì)模式之Adapter模式,結(jié)合實(shí)例形式分析了JS適配器模式的原理與具體實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01

