javascript實現表單隔行變色
本文實例為大傢分享瞭javascript實現表單隔行變色的具體代碼，供大傢參考，具體內容如下
效果如下:
代碼思路:
1、用到鼠標經過onmouseover 鼠標離開onmouseout
2、鼠標經過tr行,當前的行變背景顏色,鼠標離開去掉當前的背景顏色
3、註意:第一行 th不需要變色, 隻用獲得有td的行,這裡我們用thead和tbody進行區分
代碼如下:
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部分:
添加一個類,使鼠標放上去的時候變色
<style>
.bg {
background-color: pink;
}
</style>
javascript部分:
//獲取元素
// 獲取tbody裡面的所有的行
var trs = document.querySelector("tbody").querySelectorAll("tr");
//鼠標經過時間
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function() {
this.className = 'bg'
}
//鼠標離開事件
trs[i].onmouseout=function(){
this.className='';
}
}
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。