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='';
?? ??? ??? ?}
?? ??? ?}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于javascript实现表单隔行变色的详细内容...