javascript实现表单隔行变色 javascript实现表单隔行变色

本文实例为大家分享了javascript实现表单隔行变色的具体代码，供大家参考，具体内容如下
【javascript实现表单隔行变色】效果如下:

文章图片

代码思路:
1、用到鼠标经过onmouseover 鼠标离开onmouseout
2、鼠标经过tr行,当前的行变背景颜色,鼠标离开去掉当前的背景颜色
3、注意:第一行 th不需要变色, 只用获得有td的行,这里我们用thead和tbody进行区分
代码如下:
html部分:

one two three four

第一行第一行第一行第一行
第二行第二行第二行第二行
第三行第三行第三行第三行
第四行第四行第四行第四行
第五行第五行第五行第五行

one	two	three	four
第一行	第一行	第一行	第一行
第二行	第二行	第二行	第二行
第三行	第三行	第三行	第三行
第四行	第四行	第四行	第四行
第五行	第五行	第五行	第五行

css部分:
添加一个类,使鼠标放上去的时候变色

.bg {background-color: pink; }

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

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