当表格中单元格比较多时,可以在用户鼠标指针经过时把当前行添加背景颜色,使表格内容显得清晰和一目了然,更容易阅读。接下来我们使用鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseout实现案例效果。

上述代码中,第三行代码把获取到的tbody里面所有的行保存在变量trs中。第五行代码利用for循环来为trs中的每一个元素绑定事件。第7~9行代码为trs中的每一个元素绑定onmouseover鼠标指针经过事件,当鼠标指针进入的时候给当前tr项的类名设置为bg。第11~13行代码给trs[i]绑定onmouseout鼠标指针进入的时候给当前tr项的类名设置为空 ,去掉当前的背景颜色。浏览器预览效果如下图所示。

文章介绍了一种方法,通过JavaScript的onmouseover和onmouseout事件为表格行添加动态背景色。当鼠标经过表格行时,行背景变色,提高可读性;鼠标离开时,背景色消失。该技巧适用于增强用户交互体验。

631

被折叠的 条评论
为什么被折叠?



