鼠標(biāo)經(jīng)過(guò)tr時(shí),改變tr當(dāng)前背景顏色
更新時(shí)間：2014年01月13日 10:11:04 作者：
本篇文章主要介紹了鼠標(biāo)經(jīng)過(guò)tr時(shí),改變tr當(dāng)前背景顏色的示例代碼，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
示例如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>鼠標(biāo)經(jīng)過(guò)給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)過(guò)給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)過(guò)(onmouseover和onmouseout)實(shí)現(xiàn)--簡(jiǎn)短版
- js實(shí)現(xiàn)圖片顯示局部，鼠標(biāo)經(jīng)過(guò)顯示全部的效果
- Javascript實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)時(shí)播放聲音
- 鼠標(biāo)經(jīng)過(guò)導(dǎo)航菜單時(shí)顏色改變效果
- javascript學(xué)習(xí)筆記（二） 鼠標(biāo)經(jīng)過(guò)時(shí)，改變div塊的背景色的代碼
- javascript中onmouse事件在div中失效問(wèn)題的解決方法
- jquery插件實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片右側(cè)顯示大圖的效果(類似淘寶)
- 鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效
- CSS鼠標(biāo)響應(yīng)事件經(jīng)過(guò)、移動(dòng)、點(diǎn)擊示例介紹
- jquery左右滾動(dòng)焦點(diǎn)圖banner圖片鼠標(biāo)經(jīng)過(guò)顯示上下頁(yè)按鈕
- jquery給圖片添加鼠標(biāo)經(jīng)過(guò)時(shí)的邊框效果
- jquery簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)導(dǎo)航條改變背景圖
- Jquery中國(guó)地圖熱點(diǎn)效果-鼠標(biāo)經(jīng)過(guò)彈出提示層信息的簡(jiǎn)單實(shí)例
- jq實(shí)現(xiàn)酷炫的鼠標(biāo)經(jīng)過(guò)圖片翻滾效果
- jQuery 鼠標(biāo)經(jīng)過(guò)(hover)事件的延時(shí)處理示例
- 使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過(guò)特效
相關(guān)文章
JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記（十五） 瀏覽器中的JavaScript
Window對(duì)象對(duì)操作瀏覽器窗口非常有用，開(kāi)發(fā)者可以移動(dòng)或調(diào)整瀏覽器窗口的大小2012-08-08
js實(shí)現(xiàn)圖片切換（動(dòng)畫版）
本文主要對(duì)javascript實(shí)現(xiàn)圖片切換（動(dòng)畫版）的方法進(jìn)行步驟分析、實(shí)例介紹，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
原生JS實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫自動(dòng)輪播效果
輪播效果是老生常談的話題，今天小編通過(guò)實(shí)例代碼給大家分享原生JS實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫自動(dòng)輪播效果，感興趣的朋友跟隨小編一起學(xué)習(xí)吧2018-09-09
JS實(shí)現(xiàn)n秒后自動(dòng)跳轉(zhuǎn)的兩種方法
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)n秒后自動(dòng)跳轉(zhuǎn)的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
先明白js能放在HTML的那個(gè)位置，分別是head和body中。大部分人都是放到head里面的。下面為大家介紹下放到這兩個(gè)地方的區(qū)別2013-08-08
詳解JavaScript添加給定的標(biāo)簽選項(xiàng)
這篇文章給大家分享了JavaScript實(shí)現(xiàn)添加給定的標(biāo)簽選項(xiàng)的相關(guān)知識(shí)點(diǎn)內(nèi)容以及代碼實(shí)例，有興趣的朋友們參考下。2018-09-09
自己寫了個(gè)JS+CSS的小東西，用來(lái)看提升用戶體驗(yàn)的。 Name：WindowsTextShow；2008-12-12
JS獲取月份最后天數(shù)、最大天數(shù)與某日周數(shù)的方法
這篇文章主要介紹了JS獲取月份最后天數(shù)、最大天數(shù)與某日周數(shù)的方法,涉及JavaScript針對(duì)日期與實(shí)現(xiàn)的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
本文主要介紹JS原型鏈的知識(shí)，這里整理了相關(guān)資料及簡(jiǎn)單實(shí)現(xiàn)示例代碼，有興趣的小伙伴可以參考下2016-09-09
TypeScript魔法堂之枚舉的超實(shí)用手冊(cè)
這篇文章主要介紹了TypeScript魔法堂之枚舉的超實(shí)用手冊(cè)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10