javascript實(shí)現(xiàn)表單隔行變色
更新時(shí)間：2022年07月03日 10:39:38 作者：Favour72
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)表單隔行變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)表單隔行變色的具體代碼，供大家參考，具體內(nèi)容如下
效果如下:
代碼思路:
1、用到鼠標(biāo)經(jīng)過onmouseover 鼠標(biāo)離開onmouseout
2、鼠標(biāo)經(jīng)過tr行,當(dāng)前的行變背景顏色,鼠標(biāo)離開去掉當(dāng)前的背景顏色
3、注意:第一行 th不需要變色, 只用獲得有td的行,這里我們用thead和tbody進(jìn)行區(qū)分
代碼如下:
html部分:
<table border="1" cellpadding="10px" rules="all"> ?? ??? ??? ?<thead> ?? ??? ??? ??? ?<tr> ?? ??? ??? ??? ??? ?<th>one</th> ?? ??? ??? ??? ??? ?<th>two</th> ?? ??? ??? ??? ??? ?<th>three</th> ?? ??? ??? ??? ??? ?<th>four</th> ?? ??? ??? ??? ?</tr> ?? ??? ??? ?</thead> ?? ??? ??? ?<tbody> ? ?? ??? ??? ??? ?<tr> ?? ??? ??? ??? ??? ?<td>第一行</td> ?? ??? ??? ??? ??? ?<td>第一行</td> ?? ??? ??? ??? ??? ?<td>第一行</td> ?? ??? ??? ??? ??? ?<td>第一行</td> ?? ??? ??? ??? ?</tr> ?? ??? ??? ??? ?<tr> ?? ??? ??? ??? ??? ?<td>第二行</td> ?? ??? ??? ??? ??? ?<td>第二行</td> ?? ??? ??? ??? ??? ?<td>第二行</td> ?? ??? ??? ??? ??? ?<td>第二行</td> ?? ??? ??? ??? ?</tr> ?? ??? ??? ??? ?<tr> ?? ??? ??? ??? ??? ?<td>第三行</td> ?? ??? ??? ??? ??? ?<td>第三行</td> ?? ??? ??? ??? ??? ?<td>第三行</td> ?? ??? ??? ??? ??? ?<td>第三行</td> ?? ??? ??? ??? ?</tr> ?? ??? ??? ??? ?<tr> ?? ??? ??? ??? ??? ?<td>第四行</td> ?? ??? ??? ??? ??? ?<td>第四行</td> ?? ??? ??? ??? ??? ?<td>第四行</td> ?? ??? ??? ??? ??? ?<td>第四行</td> ?? ??? ??? ??? ?</tr> ?? ??? ??? ??? ?<tr> ?? ??? ??? ??? ??? ?<td>第五行</td> ?? ??? ??? ??? ??? ?<td>第五行</td> ?? ??? ??? ??? ??? ?<td>第五行</td> ?? ??? ??? ??? ??? ?<td>第五行</td> ?? ??? ??? ??? ?</tr> ?? ??? ??? ?</tbody> </table>
css部分:
添加一個(gè)類,使鼠標(biāo)放上去的時(shí)候變色
<style>
?? ??? ??? ?.bg {
?? ??? ??? ??? ?background-color: pink;
?? ??? ??? ?}
</style>javascript部分:
//獲取元素
// 獲取tbody里面的所有的行
?? ??? ?var trs = document.querySelector("tbody").querySelectorAll("tr");
?
?? ??? ?//鼠標(biāo)經(jīng)過時(shí)間
?? ??? ?for (var i = 0; i < trs.length; i++) {
?? ??? ??? ?trs[i].onmouseover = function() {
?? ??? ??? ??? ?this.className = 'bg'
?? ??? ??? ?}
?? ??? ??? ?//鼠標(biāo)離開事件
?? ??? ??? ?trs[i].onmouseout=function(){
?? ??? ??? ??? ?this.className='';
?? ??? ??? ?}
?? ??? ?}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JavaScript編寫頁面半透明遮罩效果的簡(jiǎn)單示例
這篇文章主要介紹了JavaScript編寫頁面半透明遮罩效果的簡(jiǎn)單示例,包括一個(gè)全屏幕div層遮蓋的方法展示,需要的朋友可以參考下2016-05-05
Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框(16)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
js 禁用只讀文本框獲得焦點(diǎn)時(shí)的退格鍵
發(fā)現(xiàn)只讀文本框有一個(gè)缺陷,當(dāng)鼠標(biāo)焦點(diǎn)在文本框里面的時(shí)候按回退鍵(backSpace), 會(huì)退回到前一個(gè)頁面2010-04-04
在js中我們有時(shí)會(huì)遇到計(jì)算,通過加減乘除處理某些業(yè)務(wù),那么這時(shí)候如果不做任何處理,就會(huì)出現(xiàn)如下典型的精度丟失問題,下面這篇文章主要給大家介紹了關(guān)于JS中浮點(diǎn)數(shù)精度問題的分析與解決方法,需要的朋友可以參考下2022-04-04
js實(shí)現(xiàn)html table 行,列鎖定的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)html table 行,列鎖定的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
javaScript 實(shí)現(xiàn)重復(fù)輸出給定的字符串的常用方法小結(jié)
這篇文章主要介紹了javaScript 實(shí)現(xiàn)重復(fù)輸出給定的字符串的常用方法,總結(jié)分析了JavaScript重復(fù)輸出給定字符串的4種常見操作技巧,需要的朋友可以參考下2020-02-02
小程序從手動(dòng)埋點(diǎn)到自動(dòng)埋點(diǎn)的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序從手動(dòng)埋點(diǎn)到自動(dòng)埋點(diǎn)的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
JavaScript利用img實(shí)現(xiàn)前端頁面埋點(diǎn)功能
做數(shù)據(jù)分析的時(shí)候需要獲取足量的有效數(shù)據(jù)，這個(gè)時(shí)候就需要我們?cè)谇岸隧撁媛顸c(diǎn)。如何來實(shí)現(xiàn)一個(gè)前端埋點(diǎn)功能，本文就帶你上手試試2022-06-06
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端效果之IndexList，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
編程這么多年，要是每次寫遍歷代碼時(shí)都用 for 循環(huán)，真心感覺對(duì)不起 JavaScript 語言,這篇文章為大家分享幾種不同的遍歷方法,需要的朋友可以參考下2017-04-04