当表格中单元格比较多时,可以在用户鼠标指针经过时把当前行添加背景颜色,使表格内容显得清晰和一目了然,更容易阅读。接下来我们使用鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseout实现案例效果。
下图实现鼠标指针经过时背景变色的效果,具体代码如下。
上述代码中,第三行代码把获取到的tbody里面所有的行保存在变量trs中。第五行代码利用for循环来为trs中的每一个元素绑定事件。第7~9行代码为trs中的每一个元素绑定onmouseover鼠标指针经过事件,当鼠标指针进入的时候给当前tr项的类名设置为bg。第11~13行代码给trs[i]绑定onmouseout鼠标指针进入的时候给当前tr项的类名设置为空 ,去掉当前的背景颜色。浏览器预览效果如下图所示。