1、首先我们来创建一个html5的文件(建议,当然你创建html4也是可以的),然后添加相关标题,比如这里就是“js完成表格高亮显示”
2、在html的body标签下创建一个7行3列的表格(包含表头),并为每一个tr标签加上id。
3、在浏览器内运行查看该html的初步效果,如下图,因为还没有添加事件和js代码,此时鼠标移动上表格行上时是没有反应的。
4、接下来我们在每一个tr上添加事件,主要是onmouseover(鼠标在该行时要执行的操作)和onmouseout(鼠标移开时要执行的操作)。因为两者执行的操作都是要改变当行的颜色,功能是一样的,只不过颜色不一样。所以我们要执行的方法要设置两个参数,一个是id,它的作用是定位到那一行,得到该行元素;另一个参数是用来辨别鼠标是over状态还是out的状态,毕竟不同状态对应不同的颜色。
5、在html的头部通过script标签对引入javascript的代码,主要是完成对应的方法。该方法其实功能很简单:1.根据id获取对就在的垌桠咛虞元素,也就是确定哪一行。2.然后根据传入进来的flag的参数,更改元素背景颜色。
6、这样的话,高亮显示的是功能就完成了。再次通过运行可以看到如下结果。说白了本次就是完成:根据鼠标的状态来更改表格行的背景颜色。