javascript實現(xiàn)表單隔行變色

更新時間：2022年07月03日 10:39:38 作者：Favour72

這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)表單隔行變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現(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部分:

添加一個類,使鼠標(biāo)放上去的時候變色

<style>
?? ??? ??? ?.bg {
?? ??? ??? ??? ?background-color: pink;
?? ??? ??? ?}
</style>

javascript部分:

//獲取元素
// 獲取tbody里面的所有的行
?? ??? ?var trs = document.querySelector("tbody").querySelectorAll("tr");
?
?? ??? ?//鼠標(biāo)經(jīng)過時間
?? ??? ?for (var i = 0; i < trs.length; i++) {
?? ??? ??? ?trs[i].onmouseover = function() {
?? ??? ??? ??? ?this.className = 'bg'
?? ??? ??? ?}
?? ??? ??? ?//鼠標(biāo)離開事件
?? ??? ??? ?trs[i].onmouseout=function(){
?? ??? ??? ??? ?this.className='';
?? ??? ??? ?}
?? ??? ?}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: