JavaScript实现表格动态变色

本文实例为大家分享了JavaScript实现表格动态变色的具体代码,供大家参考,具体内容如下

表格分为:表头、表格主体 两部分

当移动到表格主体的行时,移动到哪一行,哪一行就变化颜色,区分我们选中的行数,更明显的看到选中了哪一行

实现思路

1、获取表格主体的所有行
2、css定义一个背景颜色类
for循环遍历,将每行都分别绑定onmouseover、onmouseout事件,
onmouseover(鼠标经过)- - - 该行类名赋值定义好的背景颜色类名
onmouseout(鼠标离开)- - - 该行类名赋值空

注意:这里不用排他思想,用排他思想,鼠标离开的最后的一行会有颜色

代码示例:




    
    
    
    表格动态变色
    



    
水果 喜欢程度 季节
苹果 ☆☆☆☆☆ 四季
香蕉 ☆☆☆ 四季
葡萄 ☆☆☆ 夏季
榴莲 ☆☆☆☆☆☆☆ 夏季
芒果 ☆☆☆☆☆☆☆ 夏季
西瓜 ☆☆☆☆☆ 夏季

页面效果:

JavaScript实现表格动态变色_第1张图片

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

你可能感兴趣的:(JavaScript实现表格动态变色)